创建 vue 项目

使用 vue cli 创建项目的两种方式

准备阶段：脚手架的安装

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

• 安装脚手架：npm install -g @vue/cli
• 查看 vue cli 版本号：vue --version（显示版本号说明安装成功）
• 注意：在 PowerShell 中执行查看版本号命令,可能会报错,解决办法如下
  1. 以管理员的身份运行 PowerShell
  2. 执行命令：set-ExecutionPolicy RemoteSigned
  3. 输入 “Y” 回车即可

1. 基于 vue ui（可视化面板） 创建 vue 项目

• 终端运行命令：vue ui（需要在哪个目录创建项目,就在哪个目录下执行命令）
• 会自动在浏览器中，打开创建项目的可视化面板
• 可视化面板创建项目的步骤：
  1. 创建 --- 输入项目名称 --- 下一步
  2. 选择"手动配置项目" --- 下一步
  3. 勾选(Choose Vue version、Babel、Router、CSS Pre-processors、使用配置文件) --- 下一步
     注意：一定不要勾选 Linter / Formatter (约束代码规范),否则会让你怀疑人生
  4. 配置面板中选择（2.x 、less）--- 创建项目 --- 是否则为预设(看个人需求)
     注意：预设文件 (.vuerc) 存储路径：C:\Users\ysmptt 目录下
  5. 等待项目创建完毕（项目仪表盘中，显示欢迎的字样，则表示项目创建成功）
• 注意：在创建项目的时候，不要关闭“命令窗口”！！！
• 我们可以在 “项目的仪表盘中”，对项目进行操作（如：安装模块、依赖、打包运行、编译等操作）

2. 基于 vue create 项目名称（命令行）创建 vue 项目

• 运行 vue create 项目名称（需要在哪个目录创建项目,就在哪个目录下执行命令,目录不能有中文）

• 选择第三项 Manually select features (手动选择安装哪些功能)

• Check the features needed for your projiect (选择在项目中需要安装哪些功能)

  Choose Vue version (选择Vue版本)

  Babel (解决JS兼容性的)

  CSS Pre-processors (CSS预处理器)

  Router（路由）

  安装以上三个，用上下键选择,空格勾选,*号表示已勾选,全部选择好后回车安装

• 选择 2.X（默认,选择Vue的版本）Use history mode for router? 选择no

• 选择 Less（css预处理器）

• 选择 In dedicated config files (...等插件的配置项,放到自己独立的配置文件中)

• 是否把以上的选择存为预设,以后创建项目就不需要再重新选择了，(y/n)都行

  Save preset as: (预设的名字为:demo-first),名字随便

• 项目创建完毕后运行命令：npm run serve (在项目根目录运行命令,把项目跑起来)

使用 vite 创建项目

什么是 vite：新一代前端构建工具

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网：https://vitejs.cn

• 开发环境中，无需打包操作，可快速的冷启动。
• 轻量快速的热重载（HMR）。
• 真正的按需编译，不再等待整个应用编译完成。

## 创建工程
npm init vite-app 项目名称
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

项目的其他配置

运行项目时，让浏览器自动打开

在 package.json 文件中，添加如下代码

"scripts": {
    "serve": "vue-cli-service serve --open"
}

关闭 eslint 校验功能

在根目录下创建一个 vue.config.js 文件，并添加如下代码

module.exports = {
    lintOnSava: false
}

使用 '单引号' 替换 "双引号"

项目根目录新建配置文件：.prettierrc（项目开发中,每次保存后,自动将 双引号 替换为 单引号）

// .prettierrc 配置文件
{
    "semi": false, // 不使用双引号
    "singleQuote": true // 使用单引号
}