从零到一详聊创建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"color: #ff0000">开发过程

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文件代码标准模板样式如下：

  <template>
    <div id="...">
      组件html模板
    </div>
    </template>

    <style>
      css相关样式
    </style>

    <script>
    export default { //默认向外暴露一个对象
      name:'Hellovue',
      data () {
        return {};// data保存数据必须返回一个对象
      }
    };
    </script>

1.引入组件

1.在App.vue主文件中script标签添加import Hellovue form ./components/Hellovue.vue导入子组件。

2.组件模板对象添加components属性。

3.重启项目即可看到自己定义的组件。

4.新增页面（利用vue路由实现）在 \router\index.js 添加新增页面路由

import Hellovue from '@/components/Hellovue'
...
  {
   path: '/Hellovue',
   name: 'Hellovue',
   component: Hellovue
  }

在App.vue主页面挂载<router-link to='Hellovue'>跳转我的页面</router-link>即可

1.打包编译

终端运行命令编译

npm run build

即可产品dist文件，项目上线后只需把dist文件丢到服务器即可。ps:如果本地测试，则需修改webpack生产环境下的assetsPublicPath配置

注意事项：

1.最好使用cnpm代替npm安装依赖，因为开发过程中少部分包如果用npm是无法下载完成，一直卡住，换为cnpm毫无压力记得加上--save选项，否则别人安装的话会缺少包.

2.路径说明

‘/‘, 表示项目根目录

‘./‘，表示当前目录

‘../‘ ，表示上一级目录，可以连续多个，比如‘../../../‘表示往外层退3级目录

3.所有组件的数据都必须放置在data函数返回的对象中，无论是否有数据，否则会报错。
4.一个template组件下只能有一个并列的div，否则报错。

5.ESLint 格式问题

1.vue 创建项目时，ESLint 选择启用时候，因 ESLint 代码检查极其严格，缩进空格数量，尾部空行等皆在检查之列，可以选择关闭。

build/webpack.base.conf.js 注释掉 module->rules 中 ESLint 规则，关闭代码：

//...(config.dev.useEslint "external nofollow" href="https://eslint.org/docs/rules/semi">https://eslint.org/docs/rules/semi。随后重新 npm run dev 即可。完整说明参照https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md。或者在.eslintignore文件下配置相关忽略ESlint检查的文件格式，如:*.js,eslint则默认忽略根目录下所有的js文件。

npm config set user 0
npm config set unsafe-perm true

new Vue({
 el: '#app',
 router,
 components: { App }, // 定义组件映射
 template: '<App/>'  // 定义组件模板
})