Vue2.x 基础教程 - 环境部署和创建项目

1. 环境搭建（Windows）

1.1. Node.js - Vue基础框架

点击去Node.js 官网 下载后安装,安装过程中使用默认设置，安装到默认位置即可：C:\Program Files\nodejs\

1.2. VSCode - 免费全平台全能IDE

点击去微软VSCode官网下载后安装,安装过程中使用默认设置，安装完成后点击左侧插件图标，安装插件：
1.2.1 Pine Wu 的 Vetur - 高亮显示、纠错、格式化、调试等等。
1.2.2 sarah.drasner 的 Vue VSCode Snippets - 代码片段
1.2.3 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
安装完成后重新打开VSCode，确保VSCode加载了Node环境变量

2. 创建Vue2.x 项目

2.1 安装Vue2.x 脚手架

VSCode->终端->新建终端，输入如下命令：

>npm i vue -g
>npm i vue-cli -g

2.2 创建项目

重新启动VSCode，然后在终端中运行：

>Set-ExecutionPolicy -Scope CurrentUser
位于命令管道位置 1 的 cmdlet Set-ExecutionPolicy
请为以下参数提供值:
ExecutionPolicy: RemoteSigned<回车>
>vue init webpack my-project

? Project name(my-project) <直接回车>
? Project description (A Vue.js project) <直接回车>
? Author <输入你的名字,回车>
? Vue build (Use arrow keys) <默认的Runtime + Compiler，回车>
? Install vue-router? (Y/n) <输入Y（安装路由），回车>
? Use ESLint to lint your code? (Y/n) <输入n（代码格式要求），回车>
? Set up unit tests (Y/n) <输入Y（单元测试），回车>
? Pick a test runner (Use arrow keys)<默认的Jest，回车>
? Setup e2e tests with Nightwatch? (Y/n) <输入n（端到端测试），回车>
? Should we run `npm ...(Use arrow keys)<默认的NPM，回车>

完成后VSCode->文件->打开文件夹，导航到my-project可打开项目。
在终端中运行 npm run dev 可运行项目（注意允许Node通过防火墙）

3. Vue2.x 项目结构

3.1 主目录结构

1. build: 运行npm run build 后生成的用于部署的代码文件夹
2. config 项目配置js所在的目录
3. node_modules NPM包所在的目录
4. src Vue 源文件目录
5. static 静态文件所在的目录
6. test 测试脚本所在的目录
7. package.json 项目配置
8. index.html 入口页面

3.2 src 目录结构

1. assets 需要打包的静态文件存放地址
2. components 可以自行修改的文件夹
3. router 路由[^4.1]配置文件夹
4. App.vue vue 入口组件
5. main.js vue 入口脚本

4 基础概念

4.1 路由

Vue组件和浏览网址的映射表