一、vue.js环境安装
　　因为vue.js运行在node.js 的npm环境下,所以必须先安装node.js。

安装步骤：

1、node.js npm环境 Windows 安装包(.msi)
　　32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

按照安装详细步骤进行安装：（详细步骤）

在cmd中查看安装版本
　　　备注：安装方式不只这一种：也可使用淘宝的npm镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了 。

2.安装好npm之后，然后安装全局vue-cli 脚手架工具，用于搭建项目基本框架（也就是各种基本的模版文件）

输入命令：cnpm install -g vue-cli
　　　等待安装成功,输入命令：vue 检测安装成功与否（如图为安装成功）
　3.安装完全局脚手架后，创建项目vue init webpack vue_project(vue_project为项目名) 如图：

在创建过程中会询问的一些问题：

项目名称

项目描述

项目作者

Use ESLint to lint your code? 这个问题非常重要：就是是否使用EsLint 去规范的代码？也就是说如果你选择了Yes ，你的代码会非常的严格，不能多一个空格，否则会报错，所以最好选择No

然后等待创建完成
　　
创建后的项目文件：

4.vue-cli安装出来的项目模板间是相互依赖的，所有我们需要进入项目中安装项目依赖。cd vue_project 回车 进入项目中(cd是进入的意思)

★★★ 此处需特别注意：从npm上安装依赖，即npm install虽然慢了点，但是安装的依赖包是完全的，没有少文件。

如若从cnpm上安装依赖，即cnpm install 可能会导致最后安装的依赖包不完整。

★不建议从淘宝镜像上即cnpm安装依赖，可能会导致项目运行不了。

（出问题时可以试着两者都试试）

完成后你会发现项目中多了个node_modules文件，就是依赖包。
　　
　项目文件结构
　

5、运行你的第一个vue项目

输入命令： cnpm run dev
　　
发布成功的查看地址就是：http://localhost:8082 可以直接在浏览器中查看

二、安装vscode 并将项目运行在vscode中
　1、按照官方步骤安装vscode

2、添加基本扩展
　　
　3、打开项目文件夹
　
　终端，新建终端
　　并编辑index.html
　　测试运行npm run dev
　　

修改相关配置文件
1、大家都知道使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的，

查看config/index.js里的assetsPublicPath的字段，初始项目是/他是指向项目根目录的，此处配置可以修改视具体情况而定下面三种情况为配置值具体含义。
./ 当前目录
…/ 父级目录
/ 根目录

步骤1：将package.json中的"private": true改为"private": false。

步骤2：进入到文件夹config下的index.js中，会发现module.exports暴漏出了两种配置。
一种是dev{…}，这表示开发环境配置。还有一种是build{…}，这表示的才是我们构建版本时所需要配置的信息项。
在build中找到assetsPublicPath: '/'修改为assetsPublicPath: ‘./’。
在build中找到productionSourceMap: true修改为productionSourceMap: false。

编辑修改页面再测试效果

修改效果

三、打包测试
在根目录的命令行中输入npm run build
当根目录出现dist文件夹时证明打包成功。

参考文章：使用vscode进行vue.js项目搭建和打包
vscode将vue项目打包到docker