最详细的vue-cli工具构建vue项目教程

最详细的vue-cli工具构建VUE项目教程

1、安装node环境

1. 进入node 官网下载安装 网址 https://nodejs.org/zh-cn/ 2. 默认安装（安装在C盘） 3. 安装完成后 win+R 键 在运行当中输入 cmd 打开window命令行工具 4. 在命令行工做中输入 npm -v (-v前有一个空格) 显示版本号则表示安装成功

2、安装git

1. 打开连接 https://git-scm.com/downloads 2. 点击 Download 2.16.2 for Windows 按钮下载 3. 默认安装

3、安装 vue-cli构建工具

1、win+R 键运行cmd 2、在命令工具中输入 npm install vue-cli -g （-g表示全局）

4、用vue-cli来建立vue项目

1. 在cmd中进入想要放置项目的目录 2. 在命令行工具中输入  vue init webpack 项目名称  例如：vue init webpack abc 就会建立一个abc的项目（文件夹） 会出现一个“ ? Project name <abc> ” 3. 注意：项目名不要以数字或大写字母开头，会出现错误

4. 如下是建立项目的时候提示配置的内容：

？ Project name: 设置项目名称 你能够随便取一个（能够直接回车确认） ？ Project desciprtion: 设置项目的描述内容 随便写（能够直接回车确认） ？ Author：设置开发者 能够随便写（能够直接回车确认） -> 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 ? Install vue-Router? （选y） ? Use Eslint to link your code ? 使用使用ESlint来检测你的代码规范，不规范会报错（初学者建议选n） ? SET up unit test ? （选n） ? Setup e2e tests with Nightwatch? 选n ? Should we run `npm install` for you after the project has been created? (recommended) -> Yes, use NPM (选择这个用npm 来加载项目) Yes, use Yarn No, I will handle that myself 

5、执行安装依赖

1. cmd中进入到新建立的项目目录 2. 执行 npm install（新版本可省去此步骤） 

6、运行项目

在cmd中输入npm run dev