vue-cli 新建模板项目---vue-cli

首先要安装好node.js，然后才可以用vue。

设置淘宝镜像：大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

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

这样就可以使用 cnpm 命令来安装模块了： cnpm install[name]

安装webpack 

cnpm install webpack-g

安装vue脚手架

npm install vue-cli-g

在硬盘上找一个文件夹放工程用的，在终端中进入该目录

然后就可以创建vue项目了

环境要求：  安装有 Node.js、 vue、 vue-cli 

cd目录路径

 

步骤：

• cd 目录(你要把项目放在哪个目录)；
• vue init webpack pname(你的项目名字)；
• ? Project description (A Vue.js project) vue-cli新建项目(项目描述)；
• ? Author (xhdx <zhuming3834@sina.com>) ；zhuming3834@sina.com(项目作者)；
• ? Vue build 
❯ Runtime + Compiler: recommended for most users 
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 
  这里选择Runtime + Compiler: recommended for most users；
• ? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；
• ? Use ESLint to lint your code? (Y/n) y 是否使用ESLint，这里根据需求选择；
• ? Pick an ESLint preset (Use arrow keys) 
❯ Standard (https://github.com/feross/standard) 
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 这里选择Standard (https://github.com/feross/standard)
• ? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；
• Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；
• cd pname(项目目录)；
• npm install 安装依赖；
• npm run dev 本地运行项目

结果

默认浏览器会自动打开http://localhost:8080/#/，出现如下页面：