Vue入门

一、下载并安装node.js

下载地址：http://nodejs.cn/download/

安装过程一直next即可

二、安装完成用cmd执行安装脚手架

npm install vue-cli -g

如果安装失败报错，可能是网络原因，可尝试使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

查看Vue版本：

vue -V

查看npm版本：

npm -v

三、npm没有问题初始化项目：

vue init <template-name> <project-name>

template-name：表示模板名称，vue-cli官网提供了5种

• webpack：webpack+vue-loader的模板，功能包括----热加载、linting、单元检测、CSS扩展。
• webpack-simple：一个简单的webpack+vue-loader的模板，仅仅只是模板，不包含任何功能。
• browserify：Browserify+vueify 的模板，功能包括----热加载、linting、单元检测。
• browserify-simple：一个简单Browserify+vueify的模板。
• simple：一个最简单的应用模板。

project-name：项目名称

此处我们使用webpack模板

vue init webpack node-test

执行命令后会出现如下选项，根据自己实际开发情况进行选择即可：

• Project name：项目名称，默认为当前目录名称，不能有大写字母
• Project description：项目描述。默认为A Vue.js project，也可以自行编辑。
• Author：作者。
• Install vue-router?(Y/n)：是否需要安装Vue路由，选择Y。
• Use ESLint to lint your code?（Y/n） ：是否用ESLint限制代码风格，根据自身需求选择。
• setup unit tests ？（Y/N）：是否需要安装单元测试。
• Setup e2e tests with Nightwatch?：是否安装e2e来进行用户行为模拟测试。

注意：使用webpack进行初始化时，可能会出现如下错误：

npm ERR! Unexpected end of JSON input while parsing near '...0.2.tgz"}," 

解决方案，执行以下命令，再次重新初始化

npm cache clean --force

四、进入安装好的node-test目录

安装项目依赖包，如果网速不好可以使用cnpm进行安装：

npm install

运行程序：

 npm run dev

访问 http://localhost:8080

至此，Vue项目环境搭建完成。