vue-cli快速构建项目结构

1、 下载并安装 node.js   http://nodejs.cn/

    安装至默认路径即可

2、 确认node.js是否安装成功

打开cmd命令提示符 输入 node -v  返回node.js版本号 则表示node.js安装成功

 

cmd命令行输入 npm -v 返回npm包管理器版本号 则表示npm能装成功（node.js安 装自带npm）

3、 命令行安装nrm   （npm为包管理器 项目依赖包会使用npm安装 具体指令差异百度一下）

命令行输入npm install nrm -g  （全局安装nrm）

    安装成功后命令行输入nrm use taobao （改npm下载路径为淘宝镜像）

4、 命令行输入 npm install vue -g   （全局安装vue）

5、 命令行输入 npm install vue-cli -g  （全局安装vue-cli脚手架）

6、 命令行输入 npm install webpack -g  （全局安装webpack构建工具）

7、 新建一个或者找一个文件夹（放项目文件） 然后在该文件夹下 打开命令行

命令行输入 vue init webpack my-project （基于vue-cli初始化一个vue项目）

各种选项 ：不认识的先回车默认  大概是  项目名  项目描述  作者名 然后有几个选 择性安装的加载器 其中 ESlint是制定编码规范 TEST是单元测试 等等  输入y或者

n 即可

C:\Users\Administrator\Desktop\myproject>vue init webpack my-project

 

? Project name my-project

? Project description A Vue.js project

? Author candy

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? Yes

 

   vue-cli · Generated "my-project".

 

   To get started:

 

     cd my-project

     npm install

     npm run dev

 

   Documentation can be found at https://vuejs-templates.github.io/webpack

8、 在生成的项目文件夹下打开命令行

9、 输入 npm install   （安装项目依赖）

10、 安装完成后 继续输入  npm run dev  （开发模式运行  就是跑一下）

11、 成功后会自动打开默认浏览器 显示index页面