一、安装node环境

vue运行是基于node环境的,构建vue框架之前,需要确保node环境安装成功。在node.js官网下载安装包，傻瓜式安装。安装node.js后，就已经自带npm（包管理工具），不需要另外再进行安装npm了。终端输入命令检查是否安装成功，如果输出版本号，说明我们安装node环境成功

二、安装淘宝镜像cnpm

npm的服务器是外国的，所以有时候我们安装“模块”会很慢很慢。淘宝镜像将npm上面的模块同步到国内服务器，提高我们安装模块的时间。安装完淘宝镜像之后，cnpm和npm命令行皆可使用，二者并不冲突打开命令行，输入一下命令安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
查看版本
cnpm -v

三、安装webpack

npm install webpack -g

四、安装vue-cli脚手架构建工具

全局安装，命令行输入

npm install -g vue-cli

命令行输入vue -V查看版本号，出现版本号即为安装成功

1.Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

于安装目录打开cmd，输入以下任一命令：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

2.已安装旧版本

旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

如需升级全局的 Vue CLI 包，请输入以下任一命令：

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

3.安装完成

安装完成后你可以用这个命令来检查其版本是否正确：

vue --version

五、vue-cli搭建项目

进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

vue init webpack demo

其中demo是项目名称，可以根据自己的项目定义名称，按Enter键后，待下载完模板会进入一系列配置问题

说明：
> Project name：项目名称 
> Project description：项目描述 
> Author：作者 
> Vue build：打包方式（standalone和runtime）,按回车选择默认的就好 
> Install vue-router?：是否安装路由？肯定是需要用到的，按 y 回车 
> Use ESLint to lint your code?：是否启用eslint代码检测规则？目前不需要，按 n 回车 
> Setup unit tests with Karma + Mocha?：是否进行单元测试？目前不需要，按 n 回车 
> Setup e2e tests with Nightwatch?：是否进行端对端测试？目前不需要，按 n 回车

配置完成后我们会在自己的项目目录看到我们的项目文件demo,我们可以将终端定位到当前项目，并在命令行输入下面的命令行，项目启动成功。在浏览器地址栏中输入localhost:8080 则可以访问项目

npm run dev

六、vue项目目录介绍

1、build：构建脚本目录

　> build.js ==> 生产环境构建脚本；

　> check-versions.js ==> 检查npm，node.js版本；

　> utils.js ==> 构建相关工具方法；

　> vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；

　> webpack.base.conf.js ==> webpack基本配置；

　> webpack.dev.conf.js ==> webpack开发环境配置；

　> webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置

　　　　1）dev.env.js ==> 开发环境变量；

　　　　2）index.js ==> 项目配置文件；

　　　　3）prod.env.js ==> 生产环境变量；

3、node\_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

　　　　2）components：组件目录，我们写的组件就放在这个目录里面；

　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；

　　　　4）App.vue：根组件；

　　　　5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、babelrc：babel编译参数

7、editorconfig：代码格式

8、gitignore：git上传需要忽略的文件配置

9、postcssrc.js：转换css的工具

10、index.html：首页入口文件，可以添加一些 meta 信息等、

11、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

12、README.md：项目的说明文档，markdown 格式

七、修改port端口号

为了避免端口冲突，也可以修改port，打开config/index.js文件，修改port参数

Vue2.x项目初始化