文章目录

• VUE3 —— 项目构建
• • 一直是2.9.6如何升级高级版本
  • 创建个Vue项目
  • 加入element-plus

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/cli@4.5.13

创建个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) LessStylus# ----------------------------------------------------------? 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