如何搭建一个vue项目（vue2）

一、安装node环境

1、 下载地址：https://nodejs.org/en/
2、 检查是否安装成功：node -v
如果输出版本号，说明我们安装node环境成功

3、 可以使用淘宝的镜像：http://npm.taobao.org/
命令：npm install -g cnpm –registry=https://registry.npm.taobao.org
即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替
检查安装成功：cnpm -v

二、搭建vue环境

1、 全局安装vue-cli
命令：npm install --global vue-cli / npm install -g @vue/cli

2、 在放项目的位置，创建一个基于webpack模板的新项目
命令：vue init webpack name

具体说明：
Vue build 打包方式，直接回车
Install vue-router 是否要安装 vue-router，项目中会用到，Y 回车
Use ESLint to lint your code 是否需要 js 语法检测 目前不需要，n 回车
Set up unit tests 是否安装 单元测试工具，目前不需要 ， n 回车
Setup e2e tests with Nightwatch 是否需要 端到端测试工具 目前不需要， n 回车
3、进入项目：
命令：cd vue-demo 或者直接找到文件再打开命令
4、启动项目
命令：npm run dev
启用成功会返回一个地址，如： I Your application is running here: http://localhost:8083

三、vue项目目录讲解

1、build：构建脚本目录

1）build.js 生产环境构建脚本
2）check-versions.js 检查npm，node.js版本
3）utils.js 构建相关工具方法
4）vue-loader.conf.js 配置了css加载器以及编译css之后自动添加前缀
5）webpack.base.conf.js webpack基本配置
6）webpack.dev.conf.js webpack开发环境配置
7）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、index.html ：首页入口文件，可以添加一些 meta 信息等
7、package.json ：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md ：项目的说明文档，markdown 格式
9、.xxxx文件 ：这些是一些配置文件，包括语法配置，git配置等

四、解决vue不能自动打开浏览器的问题

当我们输入npm run dev，运行项目，命令行提示我们运行成功，但是浏览器也没有自动打开，只能自己手动输入。

解决：
1）打开config 的 index.js
2）module.exports配置中找到autoOpenBrowser，默认设置的是false，将其改为true，然后关闭项目重启就ok了，如果怕端口冲突，可以更改文件中port