035_vue脚手架

1. vue脚手架介绍

1.1. vue脚手架用于快速创建Vue项目的基础架构。

2. 安装Vue脚手架

2.1. 使用命令: npm install -g @vue/cli, 安装Vue脚手架。

2.2. 安装完成, 查看C:\Users\用户名\AppData\Roaming\npm目录 

2.3. 使用命令: vue -V, 查看脚手架版本, 报错: \npm\vue.ps1, 因为在此系统上禁止运行脚本。 

2.4. 以管理员身份运行PowerShell 

2.5. 执行: set-ExecutionPolicy RemoteSigned(签名或运行这些脚本) 

2.6. 使用命令: vue -V, 查看脚手架版本。 

3. 基于交互式命令行的方式创建vue项目

3.1. 使用命令: vue create my-vue-project创建vue项目

 

3.2. 通过上下箭头键可以切换选项, 切换到手动选择Vue版本和模块, 按回车键切换下一步 

3.3. 使用空格键可以选择我们需要的模块, 小括号有*的就是我们选择的模块, 按回车键切换下一步 

3.4. 选择3.x的版本 

3.5. 不使用历史模式的router, 我们使用hash模式的router 

3.6. 使用标准版本的ESLint 

3.7. 进行ESLint语法校验的时机 

3.8. 使用不同的配置文件, 配置模块 

3.9. 是否保存本次选项作为未来创建工程的一个模板, 我们选择否 

3.10. 创建完成 

3.11. 进入项目目录, 使用命令npm run serve运行项目 

3.12. 运行成功 

3.13. 在浏览器访问http://localhost:8080/ 

4. 基于图形化界面的方式创建vue项目

4.1. 使用命令vue ui, 打开图形化界面

 

4.2. 在浏览器中创建项目 

4.3. 点击创建按钮, 选择创建项目的路径, 然后点击在此创建新项目

4.4. 起一个项目名称, 包管理器使用默认的即可, 我们不使用git, 点击下一步按钮 

4.5. 选择手动配置项目, 点击下一步按钮 

4.6. 选择如下功能, 点击下一步按钮 

4.7. 选择如下配置, 点击创建项目按钮

4.8. 保存一个预设, 下一次创建项目就会直接选择我们之前的选项, 点击保存预设并创建项目按钮 

4.9. 创建完成 

4.10. 点击任务——>serve——>运行, 启动项目 

4.11. 启动成功, 点击启动app按钮 

4.12. 访问项目 

4.13. 创建完成的项目目录分析

4.14. 项目文件详细分析 

5. 通过vue.config.js文件, 配置项目

5.1. 在项目根目录下创建vue.config.js

 

5.2. 在vue.config.js文件中, 配置自动打开浏览器和端口号 

 

5.3. 在终端中运行: npm run serve命令

5.4. 自动打开浏览器访问