0. 首先要配置Node.js环境

太多可参考的了，这里就不详写了。

• 《菜鸟教程》

• 《Node.js - npm 与cnpm配置(Windows10)》

0.1

cnpm卸载命令：npm uninstall cnpm -g

安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

0.2

window下node进入编辑模式后输入require('express')后，提示Error: Cannot find module "***"的解决办法：

环境变量NODE_PATH，其值设置为：

（安装的node.js文件夹路径）\node_global\node_modules

0.3

cnpm会被安装到

（安装的node.js文件夹路径）\node_global\node_modules

下，而系统变量path并未包含该路径。在系统变量path下添加路径

（安装的node.js文件夹路径）\node_global

即可正常使用cnpm（如命令行输入：cnpm -v验证）

0.4

npm执行过程中，使用 crtl+c 将提示批处理操作是否终止（Y/N）

0.5

npm添加代理和取消代理（主要是淘宝镜像）：https://www.cnblogs.com/tonyzt/p/11635421.html

1. 新建项目

这么创建！

2. 安装内置终端

步骤：

1. 工具

2. 内置终端

3. 插件安装

4. 安装内置终端

可能安装完需要重启 HbuilderX? 不重启的话，这个内置终端用起来会有点问题。

（不过，也可能只是个例现象？）(T ^ T)

3. 打开内置终端

1. 选中项目

2. 按快捷键：Alt+C

3. 输入以下内容安装依赖包：

   1. npm install axios -save-dev          // 处理http应用请求的包

   2. npm install --save vue-router   // Vue官方的路由管理器

   3. npm i element-ui -S // elementUI，一个不错的UI组件库

   4. npm install babel-plugin-component -D // 按需导入elementUI组件用

4. package.json 指南

http://nodejs.cn/learn/the-package-json-guide

（可以参考看看）

5. 工具->设置->运行配置

1.node运行配置

两个路径可不配置

要配置的话：

（1）选择内置终端

（2）npm 路径查询 npm config get prefix（cmd 运行）

（3）node 路径查询where node （cmd 运行）

注：作者配置后会导致这里的npm run serve不能用（尚不知啥原因）

快捷的执行命令方式

2.浏览器配置：（看个人用哪个了）

示例

6. 初次运行

现在要运行项目爽一下了 ，对，已经可以用了，都是一些默认的内容。

步骤：

1. 选中项目

2. 按快捷键：Alt+C 

3. 输入：npm run serve

4. 记得复制内置终端里显示的  http://localhost:8080/ 到浏览器网址处打开

7. main.js中

Vue.config.productionTip = false

阻止启动生产消息，常用作指令

没有Vue.config.productionTip = false这句代码，它会显示你生产模式的消息

开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。

而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。

此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。

——摘于官网说明

大概意思应该就是，消息提示的环境配置，设置为开发环境或者生产环境

8. 各种文件

• favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo, 如图 红圈 的位置， 目前主要的浏览器都支持favicon.ico图标. 

• main.js 入口js文件（里面将创建APP.vue根组件）

• APP.vue 根组件

• index.html 主页

• node_mudules npm下载的依赖

• src 项目源码目录（基本都是在这里面写代码）

• assets 静态资源目录

• components 公共组件目录

9.让vue项目启动时自动启动浏览器

注意得先配置好运行配置里的浏览器路径，再填写这边的配置信息

找不同

10.Vue路由

参考：《Vue路由（vue-router）详细讲解指南》

示例

11. vue初始化报错

报错信息：Cannot read property '$createElement' of undefined

解决方法：router/index.js 中 components 改为 component

12. Element-UI

如果要使用 element-UI组件，一定要先看官网上的组件按需导入方式在 main.js 中写好，这样就不需要到处引入UI组件了

此外，main.js 中还可以写入这两句：

import  'element-ui/lib/theme-chalk/index.css' // 引入element-ui的样式
Vue.prototype.$message = Message // 为了可以以this.$message.error的方式使用Massage组件

13. 修改标签名和图标

13.1 找到项目根目录的index.html

修改标签名或者图标都需要在项目根目录下的 index.html 文件中修改

13.2 修改标签名称

进入 index文件，找到 title标签，修改 title标签 就能直接改变浏览器的标签名。

13.3 修改图标

修改图标我们需要在 index.html 的 head 添加 link 标签进行修改

这里需要注意要把自己的的图片放在 static目录 下（不要放在src目录下，浏览器会找不到）

14. 注

本文写于初学VUE项目时期，是当之无愧的菜鸟，有错请温柔指出(๑>؂<๑）