一：首先环境安装（node.js vue-cli），然后才能创建项目

Node环境安装

下载node.js安装

cnpm安装

手动指定从哪个镜像服务器获取资源
npm install -gd express -- registry=http://registry.npm.taobao.org
为了避免每次安装都需要--registry参数，可以使用如下命令进行永久设置：
npm config set registry http://registry.npm.taobao.org

image.png

vue-cli2 安装

可以通过npm root -g查看全局安装的文件夹位置
npm install -g vue-cli
cnpm install -g vue-cli

image.png

创建vue-cli2项目

1. vue init webpack projectName

   
   
   image.png
   
   

   项目创建成功如下图显示：

   
   
   image.png

2. 启动服务: npm run dev

   
   
   image.png

subline 配置vue语法高亮

https://github.com/vuejs/vue-syntax-highlight
设置第一个 ->浏览资源包 ->新建vue文件夹 ->将压缩包的内容都复制进去
然后回到subline ctrl+shift+p 选择第一个vue

单独安装eslint插件

1. 安装插件 npm install 插件名称 --save(安装到生产环境) / --save-dev(安装到开发环境)
2. 卸载插件 npm uninstall 插件名称 --save(卸载生产环境) /--save-dev(卸载开发环境)

eslint安装到生产环境只需要加--save，而安装到开发环境则save和dev都必须加上，如果只加--dev那么还是会安装生产环境上；
npm i eslint --save (生产环境);
npm i eslint --save-dev(开发环境，注意save和dev之间只有一杠，没有空格)

vue-cli3安装

1. 卸载vue-cli2 : npm uninstall vue-cli -g
2. 普通安装vue-cli3: npm install -g @vue/cli
3. 淘宝镜像安装vue-cli3: cnpm install -g @vue/cli

启动项目的命令：vue ui

GUI图形界面:方便，运行速度比较慢

创建vue-cli3项目

1. vue create projectName

   
   
   image.png
   
   
   image.png
   
   

   项目创建成功如下图所示：

   
   
   image.png

2. 启动服务：npm run serve

   
   
   image.png