使用vscode运行第一个vue程序

一、环境安装

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板

1.1安装Node

1，安装Node.js直接官网下载，一路next

cmd中输入node -v,查看是否能够正确打印出版本号即可！

2，安装Node.js淘宝镜像加速器（cnpm）

npm install cnpm -g

1.2安装webpack

npm install webpack -g

npm install webpack-cli -g

测试是否安装成功

webpack -v

1.3安装vue-cli脚手架构建工具

cnpm install vue-cli -g

二、使用vscode初始化一个简单的项目

2.1首先选定目录，然后在命令行中把目录转到选定的目录。执行以下命令：

vue init webpack demo

2.2在安装时会询问你:

（1）Project name demo；项目名称demo。（确定按enter，否按N）
（2）Project description (A Vue.js project)；项目描述
（3）Author (wtt1002)；作者（wtt1002）。（确定按enter，否按N）
（4）Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render 　　　　　　　　functions are required elsewhere；（按enter）
（5）Install vue-router? (Y/n)；（可安可不安，我按enter）
（6）Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。（使用ESLint语法，建议N）
（7）Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？（Y / N）。（建议N）
（8）Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / N）。（建议N）

2.3通过npm run dev启动项目

npm run dev

2.4按住Ctrl点击URL就可以访问了