利用vue-cli创建Vue项目
1.安装node.js:Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。
配置参考:http://www.runoob.com/nodejs/nodejs-install-setup.html;
2.基于node.js,利用淘宝npm镜像安装相关依赖。
在cmd里直接输入:npm install -g cnpm --registry=https://registry.npm.taobao.org,回车,等待安装...
注意:确保npm版本大于等于3.0.0,否则后续安装会出现问题;
3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架。
在cmd里 (1)输入:cnpm install -g vue-cli,回车,等待安装...
(2)输入:vue,回车,若出现vue信息说明表示成功;
4.创建项目。
在cmd里输入:vue init webpack vue_test(项目文件夹名),回车,等待一小会儿,依次出现‘git’下的项,可按下图操作
5.安装依赖。
在cmd里 (1)输入:cd vue_todo(项目名),回车,进入到具体项目文件夹
(2)输入:cnpm install,回车,等待一小会儿
回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)
基于脚手架创建的默认项目结构如下图所示:
6.测试环境是否搭建成功。(建议方法1)
方法1:在cmd里输入:npm run dev
方法2:在浏览里输入:localhost:8080(默认端口为8080)
运行起来后的效果如下图所示:
利用vue-cli创建Vue项目的更多相关文章
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题
最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...
- 用vue ui创建的项目怎么关闭eslint校验
在Vue Cli的控制面板找到配置-ESLint configuration,然后关闭保存时检查就可以了
- Vue CLI及其vue.config.js(一)
有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- 用vue脚手架创建bootstrap-vue项目
用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...
- [Vue CLI 3] vue inspect 的源码设计实现
首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...
- 用Angule Cli创建Angular项目
Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
随机推荐
- wnds更新为1.0
重画了外观,增加了若干功能,已经上传到码云 https://gitee.com/alan0405/wnds
- Spring+Hiberate 多数据源的网文整理
解决方案: http://www.th7.cn/Program/java/2011/10/23/44664.shtml 分析共享Spring配置数据源四种方式(附相应jar包) :http://ww ...
- 『JavaScript』模仿接口
JavaScript中并没有内置的创建或实现接口的方法.这里将利用JavaScript的灵活性,来实现与接口意义相同的功能. 什么是接口? 接口的好处: 接口提供了一种用以说明一个对象应该具有哪些方法 ...
- QC的使用学习(二)
今日学习清单: 1.Quality Center中左上角选项中(QC 10.0中文版)工具菜单下的自定义中的几个内容,有:用户属性.组.项目用户.模块访问.需求类型.项目列表等.用户属性打开后是对当 ...
- ADB常用指令
adb 命令是adb程序自带的一些命令:adb shell则是调用Android系统的命令,Android系统特有的命令都放在Android设备的/system/bin目录中 MonkeyRunner ...
- JS运行在服务器端注意事项
<script runat="server" language="javascript"> </script> 1. ASP利于JS重载 ...
- php+Mysql中网页出现乱码的解决办法详解
$conn = mysql_connect("$host","$user","$password");mysql_query("S ...
- HDU 4565 So Easy!(数学+矩阵快速幂)(2013 ACM-ICPC长沙赛区全国邀请赛)
Problem Description A sequence Sn is defined as:Where a, b, n, m are positive integers.┌x┐is the cei ...
- Uva 294 Divisors(唯一分解定理)
题意:求区间内正约数最大的数. 原理:唯一分解定义(又称算术基本定理),定义如下: 任何一个大于1的自然数 ,都可以唯一分解成有限个质数的乘积 ,这里 均为质数,其诸指数 是正整数.这样的分解称 ...
- java课堂第7次笔记