Vue2/Vue3

修改 node 更新源

• 將默認(rèn)的 更新源修改為 淘寶的 下載地址

PS C:\Users\Administrator> npm config set registry https://registry.npm.taobao.org
PS C:\Users\Administrator>npm config get registry
https://registry.npm.taobao.org/

安裝

npm install -g @vue/cli 

• 一般 新版 Vue 腳手架不可以共存 所以如果有 舊版的腳手架 會(huì)提示你 需要卸載 原來(lái)的腳手架
• 然后重新執(zhí)行上面的安裝

npm uninstall -g vue-cli

• 安裝好之后 就可以去初始化項(xiàng)目了
• 值得一提的是我在官方的文檔中找到了一個(gè) 在使用新版腳手架時(shí)仍然可以 創(chuàng)建舊版的 項(xiàng)目 創(chuàng)建的命令不變 但是 需要執(zhí)行一下 以下 命令

npm install -g @vue/cli-init

• 這是一個(gè)橋接工具

創(chuàng)建項(xiàng)目

• 在安裝好腳手架之后 就可以去初始化 新版的 項(xiàng)目了

vue create 'project_name' # project_name 用對(duì)應(yīng)的項(xiàng)目名字替換

• 和 舊版本的命令一樣 按下回車(chē)鍵之后 就會(huì)創(chuàng)建一個(gè) 和項(xiàng)目名稱(chēng)一樣的文件夾

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint) # vue 3 
  Default ([Vue 2] babel, eslint) # vue 2 這兩個(gè)默認(rèn)是沒(méi)有 Vue-Router 等一系列常用的 moudel 的 所以一般選擇第三個(gè)
  Manually select features #  手動(dòng)選擇 自定義 選擇 需要的插件

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

* Choose Vue version ： vue的版本
* Babel：是否需要babel
* Typescript：是否需要ts
* Progressive Web App (PWA) Support：漸進(jìn)式Web應(yīng)用（PWA）支持
* Router： vue路由
* Vuex：vue狀態(tài)管理器
* CSS Pre-processors：CSS預(yù)處理器（比如less、sass）
* Linter / Formatter：代碼風(fēng)格檢查和格式化
* Unit Testing：?jiǎn)卧獪y(cè)試
* E2E Testing：E2E測(cè)試

• 就是我這個(gè)有點(diǎn)奇怪 別人都有 手動(dòng) 選擇 vue 的版本 的這個(gè)選項(xiàng) 而我沒(méi)有 有可能是 我選的太晚了 被迭代掉了這個(gè) 選項(xiàng)
• 選擇完成之后就是這個(gè)樣子

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)    
> 3.x
  2.x

• 然后它又提示我選擇 Vue 版本 這里選擇 Vue 3.x

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? (y/N) N # 是否使用 es6 的語(yǔ)法 來(lái)創(chuàng)建 Vue 的組件 果斷選擇 N
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes # 是否使用歷史記錄模式
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):  # 選擇 一下 CSS 預(yù)處理器
  Sass/SCSS (with dart-sass)
> Less # 簡(jiǎn)單點(diǎn)選擇 Less 
  Stylus
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) # 這些配置 是分開(kāi)寫(xiě)在每個(gè)配置文件中 還是 統(tǒng)一寫(xiě)在 package.json 中
> In dedicated config files
  In package.json
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) # 是否保存我們當(dāng)前的選擇 這里選擇 No 這里英文的意思 是否 保存當(dāng)前的配置 在未來(lái)的項(xiàng)目中使用 

• 配置完成之后就會(huì)去自動(dòng)的 創(chuàng)建整個(gè)項(xiàng)目

Vue CLI v5.0.8
?  Creating project in E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin.
??  Installing CLI plugins. This might take a while...


added 852 packages in 2m
??  Invoking generators...
??  Installing additional dependencies...


added 34 packages in 17s
?  Running completion hooks...

??  Generating README.md...

??  Successfully created project vue_systemfacesignin.
??  Get started with the following commands:

 $ cd vue_systemfacesignin
 $ npm run serve

PS E:\java\idea_java_maven\SystemFacesignin> 

• 安裝完成之后 進(jìn)入的項(xiàng)目目錄下 啟動(dòng)項(xiàng)目即可

PS E:\java\idea_java_maven\SystemFacesignin> cd vue_systemfacesignin # 進(jìn)入到項(xiàng)目的根目錄中
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> npm install # 安裝一下 項(xiàng)目依賴(lài)
up to date in 14s
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> 
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> npm run serve

> vue_systemfacesignin@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 10626ms                                                                                                                      23:23:36

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.4:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

No issues found.

安裝需要的組件 比如 element-plus

安裝 element-plus

PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> vue add element-plus
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

??  Installing vue-cli-plugin-element-plus...


added 1 package in 16s
?  Successfully installed plugin: vue-cli-plugin-element-plus

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

??  Invoking generator for vue-cli-plugin-element-plus...
??  Installing additional dependencies...


added 14 packages in 38s
?  Running completion hooks...

?  Successfully invoked generator for plugin: vue-cli-plugin-element-plus
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> 

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-830331.html

到了這里，關(guān)于Vue 新版 腳手架 初始化 筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！