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 主目录结构
- build: 运行npm run build 后生成的用于部署的代码文件夹
- config 项目配置js所在的目录
- node_modules NPM包所在的目录
- src Vue 源文件目录
- static 静态文件所在的目录
- test 测试脚本所在的目录
- package.json 项目配置
- index.html 入口页面
3.2 src 目录结构
- assets 需要打包的静态文件存放地址
- components 可以自行修改的文件夹
- router 路由[^4.1]配置文件夹
- App.vue vue 入口组件
- main.js vue 入口脚本
4 基础概念
4.1 路由
Vue组件和浏览网址的映射表