摘要:基礎命令安裝檢查是否安裝成功新建項目項目啟動打包功能配置運行以下命令來創建一個新項目你可以選默認的包含了基本的設置的,也可以選手動選擇特性來選取需要的特性這里我們選擇手動選擇功能自定義功能配置按下空格選擇或取消路由是否使用模式如果
基礎命令
# 安裝 npm install -g @vue/cli # 檢查是否安裝成功 vue -V # 新建項目 vue create my-project # 項目啟動 npm run serve # 打包 npm run build功能配置
運行以下命令來創建一個新項目:
vue create my-project
你可以選默認的包含了基本的 Babel + ESLint 設置的 preset,也可以選“手動選擇特性”來選取需要的特性(這里我們選擇手動選擇功能)
Vue CLI v3.9.3 ? Please pick a preset: default (babel, eslint) > Manually select features
自定義功能配置 (按下空格選擇或取消)
Vue CLI v3.9.3 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Babel >( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex (*) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
路由是否使用history模式(如果使用history模式,需要后臺去配合)
Vue CLI v3.9.3 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
選擇CSS 預處理類型 (按自己習慣即可)
? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) > Less Stylus
選擇Linter / Formatter規范類型 (按自己習慣即可)
Vue CLI v3.9.3 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less ? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config > ESLint + Standard config ESLint + Prettier
選擇檢測的方式(保存的時候檢測/提交的時候檢測)
Vue CLI v3.9.3 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less ? Pick a linter / formatter config: Standard ? Pick additional lint features: (Pressto select, to toggle all, to invert selection) >(*) Lint on save ( ) Lint and fix on commit
選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置 (多帶帶配置成文件/package.json中)
Vue CLI v3.9.3 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less ? Pick a linter / formatter config: Standard ? Pick additional lint features: (Pressto select, to toggle all, to invert selection)Lint on save ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json
是否保存剛剛這些配置 (按自己習慣即可)
Vue CLI v3.9.3 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less ? Pick a linter / formatter config: Standard ? Pick additional lint features: (Pressto select, to toggle all, to invert selection)Lint on save ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N) n
然后自動下載依賴,下載完成會提示
? Successfully created project vue-study. ? Get started with the following commands: $ cd my-project $ npm run serve
執行npm run serve命令,即可看到效果
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106362.html
摘要:因為項目技術架構需要,要用進行搭建,所以簡單的分享下如何優雅的開始。第三步創建項目相對,創建就不是之前一大堆了。直接,是項目名字。但是個人建議,進行多選,根據自己需要進行選擇。根據提示,運行一把一下,跑起來的感覺很棒。 因為項目技術架構需要,要用vue-cli 3.0進行搭建,所以簡單的分享下3.0如何優雅的開始。下面做一下簡單的介紹,希望可以幫到有需要的朋友。 vue-cli 3.0...
摘要:在年月份發布了版本,經過重構之后,可以說是一個船心版本在項目都落地之后,就想升級一下版本,嘗一嘗帶來的舒適,也是為后面項目的開展做一個準備。選了之后會詢問是否開啟模式,以及選擇預處理器,這里根據個人情況選用。 vue-cli在2018年8月份發布了3.0版本,經過重構之后,可以說是一個船心版本!在項目都落地之后,就想升級一下cli版本,嘗一嘗3.0帶來的舒適,也是為后面項目的開展做一個...
摘要:配置環境變量參考打包后項目的啟動發生了變化,之前可以直接打開,現在需要參數的意思是將其架設在模式下這個模式會處理即將提到的路由問題 (第一章)學習vue-cli 3.0腳手架構建vue項目 vue學習鞏固及遇到的問題 首先這次使用的vue腳手架為vue-cli 3.0,它跟之前的腳手架改變了很多,這里我也沒去細細的研究,也只懂得了最基本的用法,參考: vue-cli 3 地址:http...
摘要:配置環境變量參考打包后項目的啟動發生了變化,之前可以直接打開,現在需要參數的意思是將其架設在模式下這個模式會處理即將提到的路由問題 (第一章)學習vue-cli 3.0腳手架構建vue項目 vue學習鞏固及遇到的問題 首先這次使用的vue腳手架為vue-cli 3.0,它跟之前的腳手架改變了很多,這里我也沒去細細的研究,也只懂得了最基本的用法,參考: vue-cli 3 地址:http...
摘要:安裝與配置最近公司要開新項目,用配置,讓我搞一搞,做個記錄。最好自己去官網過一遍的文檔安裝完成后檢測一下是否安裝成功,如下圖展示。顯示以上就安裝成功。第一個默認配置只會安裝和,其它的需要自己配置,不建議選,這里我們選擇第二個手動配置。 vue-cli3.0安裝與配置 最近公司要開新項目,用vue-cli3.0配置,讓我搞一搞,做個記錄。 安裝 首先你要升級到cli3.0,命令如下。(最...
閱讀 3280·2023-04-26 02:09
閱讀 2574·2021-11-24 09:39
閱讀 3268·2021-11-16 11:52
閱讀 3614·2021-10-26 09:50
閱讀 2771·2021-10-08 10:05
閱讀 2456·2021-09-22 15:25
閱讀 3299·2019-08-30 13:14
閱讀 908·2019-08-29 17:06