一、节点安装

1)如果不确定是否安装了node，可以在命令行工具：node -v(检查版本)中执行；

2)如果执行结果显示xx不是内部命令，则说明您没有安装节点，节点的安装地址是http://nodejs.cn/download/

注意：要安装vue-cli支架，目前需要有高于v4.0的节点版本。

第二，vue-cli全局安装

命令行执行： NPM install-g vue-CLI//plus-g安装到全局

安装完成后，可以输入命令：vue回车，可以看到vue的命令行；

**:如果npm在国内网络环境中可能较慢，解决方案：

使用淘宝镜：

1.官网：http://npm.taobao.org；

2.安装：NPM安装cnpm-g-registry=https://registry.npm.taobao.org；注意：安装后，最好检查其版本号cnpm -v或关闭命令提示符后重新打开。安装后，直接使用可能导致错误；

3.注意：cnpm与npm完全相同，只是在执行命令时npm被更改为cnpm(在以下操作中，cnpm将替换npm)。

4如何更新npm:可以使用npm install -g npm来更新版本

第三，初始化项目

执行命令：vue init webpack演示(您的新项目名/文件名)

执行后，文件夹将自动初始化：演示

手动打开演示文件夹，查看基本项目是否已初始化：

第四，启动项目

如上图所示，执行初始化项目后，下面会有相应的命令：

继续执行：cd演示(这是进入演示文件夹的命令)

然后执行安装：npm安装

注意：npm install可以安装已经有vue的插件。第三步，项目已经初始化，package.json中有相关配置，可以直接在这里安装；

安装完成后执行命令：npm运行dev

整个项目已经开始：

五.项目文件配置介绍

Build和config是关于webpack的配置，包括一些服务器和端口；

Node_modules:安装相关的代码库；

Src :存储源代码；

静态：存储第三方静态资源的gitkeep in static如果为空，也可以提交给gitHub。正常情况下是不能提交的。

Babelrc:将es6文件编译成es5

那个。babelrc文件{ ' preferences ' :[' es 2015 '，' stage-2']，//表示默认，这意味着需要提前安装的插件' plugins ' :[' transform-runtime ']进行babelrc转换，//转换es6' comments' 33366的方法。editorconfigcharset=utf-8 //编码Indent _ style=space//Indent style，Indent_size=2 //Indent size为2帧end_of_line=lf //新行字符样式insert_final_newline=true //创建文件时，将在文件末尾自动插入新行trim _ training _ spaces=true//将自动删除行尾多余的空间。eslintignore忽略语法检查的目录文件

就是忽略build/*。js和config/*。射流研究…

package.json :

{'name' :' demo '，' version' :' 1.0.0 '，' description' :' demoapp '，' author' : '，' private' : true，' scripts' : {/*例如，npm run dev将执行node build/dev-server.js，npm run build将执行node build/build.js，因此您可以配置script */' dev ' 3360 ' node build/dev-server . js。Build' :' nodebuild/build.js '，' lint' :' eslint-ext.js，vuesrc ' }，' dependencies ' : {/* project dependencies */' vue ' : ' 2.2。Vue-router' :' 2.2.0'}，' dev dependencies' : {//...编译所需的' }、'引擎' : { '节点' :'=4.0.0 '、' NPM' :'=3.0.0'}的入口文件、'浏览器列表' : ['1% '、'最后2个版本'、'非ie=8']}是index.html和main.js

以上是边肖介绍的vue-cli脚手架安装的详细讲解和集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！