VUE3 —— 项目构建

VUE3 —— 项目构建

---

一直是2.9.6如何升级高级版本

• 原因
  其实导致这个原因是从vue-cli 3.0版本开始原来的npm install -g vue-cli 安装的都是旧版，最高到2.9.6，安装新版必须是新的命令npm install -g @vue/cli 这就导致了，如果我们再2.9.6版本还存在的情况下再使用npm install -g @vue/cli 命令就会同时存在两个版本，你用vue create 【项目名称】命令会先找到旧版的，就会提示你卸载旧版安装新版
• 解决办法
  这里就说下怎么解决。其实知道原因后就可以想到个办法，就是把旧版和新版都卸载了，就不会有冲突了，然后直接安装最新版本就可以了，npm uninstall -g vue-cli 卸载旧版、 npm uninstall -g @vue/cli 卸载新版
  之后安装新版，这里给大家推荐个命令 cnpm view @vue/cli versions --json
• 指定版本
  查看下新版有哪些版本，你可以根据自己的需要安装新版。这里我选中安装4.5.13的版本
  npm install -g @vue/[email protected]

创建个Vue项目

# 利用 vue-cli 创建项目
vue create imooc-admin
# 进入模板选择
Vue CLI v4.5.13
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features  // 选择手动配置

# ----------------------------------------------------------

? Check the features needed for your project: 
 (*) Choose Vue version // 选择 vue 版本
 (*) Babel // 使用 babel
 ( ) TypeScript // 不使用 ts
 ( ) Progressive Web App (PWA) Support // 不使用 PWA
 (*) Router // 添加 vue-router
 (*) Vuex // 添加 vuex
>(*) CSS Pre-processors // 使用 css 预处理器
 (*) Linter / Formatter // 代码格式化
 ( ) Unit Testing // 不配置测试
 ( ) E2E Testing  // // 不配置测试
 
# ----------------------------------------------------------

 Choose a version of Vue.js that you want to start the project with 
  2.x
> 3.x // 选择 vue 3.0 版本

# ----------------------------------------------------------

 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n // 不使用 history模式 的路由
 
# ----------------------------------------------------------

 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
> Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
  Sass/SCSS (with node-sass) 
  Less
  Stylus
  
# ----------------------------------------------------------

? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config
> ESLint + Standard config // 使用 ESLint 标准代码格式化方案
  ESLint + Prettier 
  
# ----------------------------------------------------------

? Pick additional lint features: 
 (*) Lint on save //  
>(*) Lint and fix on commit  // 保存时 && 提交时，都进行 lint

# ----------------------------------------------------------

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 单独的配置文件
  In package.json
 
# ----------------------------------------------------------

 Save this as a preset for future projects? (y/N) n // 不存储预设

加入element-plus

# 执行添加element-plus
vue add element-plus

? How do you want to import Element Plus? 
✔  Fully import
? Do you want to overwrite the SCSS variables of Element Plus? 
✔  No
? Choose the locale you want to load, the default locale is English (en) 
✔  zh-cn

  Invoking generator for vue-cli-plugin-element-plus...
⚓  Running completion hooks...
# 显示这行就代表成功了
✔  Successfully invoked generator for plugin: vue-cli-plugin-element-plus