从零到一详聊创建Vue工程及遇到的常见问题-创新互联
准备工作
1.判断是否需要FQ或安装镜像，镜像一般可安装国内淘宝镜像，详情可看这里：cnpm
npm install -g cnpm --registry="cnpm"全局安装淘宝cnpm。
2.开发工具选择很多，VUE无专用开发工具，开发项目多以SPA形式体现，本例使用 Visual Studio Code。
3.调试工具选择很多，官方推荐 vue-devtools 。
安装方法：FQ或者github主页。https://github.com/vuejs/vue-devtools下载压缩包，解压到Chrome扩展程序。
环境搭建
1.安装 Node.js 10.15.3, npm包管理工具（高版本node.js自带npm）。
安装完成后，DOS命令行输入命令检查安装情况npm -v,出现npm版本号即可。
下载地址https://nodejs.org/en/download/
2.全局安装 vue-cli脚手架
DOS命令行安装(-g 参数表示安装至 npm 工作路径,以后任意位置均可访问)
npm install -g vue-cli
3.安装 开发工具 Visual Studio Code
1.下载地址 https://code.visualstudio.com/Download
注意 User Installer / System Installer 不同（建议安装系统版本）
2.安装 Vetur ,vue 2 snippets插件
文件 -> 选项 -> 扩展 -> 搜索 -> 输入 Vetur/vue 2 snippets -> 安装
3.安装 语言包（视个人喜好）
文件 -> 选项 -> 扩展 -> 搜索 -> 输入 Chinese(Simplified)... -> 安装
4.打开文件夹... 开发已存在项目
4.安装 vue-devtools。
1.下载 https://github.com/vuejs/vue-devtools
2.DOS 命令进入解压后目录
修改 \shells\chrome\manifest.json中 background 节点 persistent 值为 true
3.运行 npm install 命令安装依赖包。
进度条等待完成，大约5-15分钟，必要使用cnpm
4.运行 npm run build(一定要执行这步，不然后面会报错)
5.启动 Google Chrome -> 输入 chrome://extensions/ -〉确认打开“开发者模式” -> 加载已解压扩展程序 -> 选择 shells\chrome 确定即可安装
初始化项目
初始化项目有多种方式，建议采用 Webpack 模板模式
1.进入需要创建Vue项目文件夹，打开DOS命令行输入：vue init webpack 项目名称
2.然后终端会出现下图“一问一答”模式
“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车
“Install vue-router”:是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件
“Use ESLint to lint your code”:是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置
“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”
“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也同样选择的是“N”
3.下载依赖包
cd ‘项目文件' 终端执行命令：npm install .这个过程会生成一个node_modules 文件夹
4.调试项目
终端输入：npm run dev/start
5.打开Google Chrome ,默认项目地址:localhost://8080,访问即可。F12启用开发者调试工具，调试菜单栏选择 Vue
开发过程
1.相关文件说明
build和config >webpack配置相关文件
node_modules>项目需要的模板文件
src/main.js>入口js文件
src/assets>公共的样式，图片文件
src/components>各种vue组件文件
src/App.vue>页面主组件
src/router>vue-router 路由配置文件
static>静态资源文件（不会被webpack处理）
.eslintrc.js>eslint检查配置文件
.editorconfig>代码编辑环境配置文件
.eslintignore>eslint检查忽略文件
.babelrc>babel编译参数配置文件
index.html>主页，项目入口文件
package.json>项目配置文件，描述项目信息和依赖
README.md>项目的说明文档
2.新增组件
在 \src\components 目录新建 vue 文件(每一个.vue文件都是一个单独vue组件，用来实现页面特定的功能界面，包括基本的骨架html+CSS+js)。例如 Hellovue.vue，vue文件代码标准模板样式如下：
组件html模板
本文题目：从零到一详聊创建Vue工程及遇到的常见问题-创新互联
当前URL：http://6mz.cn/article/deieip.html