vuecli3建立項目，尤爲推薦用圖形化界面

TL;DR

• 安裝cli3的命令行npm install -g @vue/cli
• 安裝預覽單個vue文件npm install -g @vue/cli-service-global
• 強烈推薦使用vue ui導入已有項目或新建項目，安裝插件，進行eslint規則配置等超級好用
• 保存時自動統一代碼風格，真的爽爆了
• 我的生成項目的習慣參數，這裏換成ui視圖也是同樣的

vue create hello-vue
# 選擇這個
> Manually select feature
# 哎 慚愧 我還不會ts
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
# 不選擇 history模式，這個因項目而已，我這邊hash夠用
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
# dart的比較快，其餘的隨意
❯ Sass/SCSS (with dart-sass)
# 加prettier，保存的時候，能自動格式化vue裏的html和css，爽爆了，這裏儘可能不選錯
❯ ESLint + Prettier
# 保存就自動lint，commit會太多
❯◉ Lint on save
# 分別生成配置文件，一目瞭然
❯ In dedicated config files
# 保存配置
Save this as a preset for future projects? y

複製代碼

• 本人水平有限，僅供參考

安裝cli3

1. node -v

• 若低於8.9.0，,須要npm install -g n和n stable更新node到最新的穩定版，mac下可能須要sudo
• 報錯的話，說明沒有安裝node，下載一個node

2. vue --version

• 版本不是3的就執行 npm uninstall vue-cli -g
• 報錯的話，直接安裝cli3 npm install -g @vue/cli,再vue --version,檢測下

cli直接預覽單個vue文件

1. npm install -g @vue/cli-service-global
2. 去任意文件夾，建一個App.vue，固然文件夾裏還能夠有別的文件，這個文件只是啓動文件
3. vue serve App.vue 文件夾裏會生成Node_module,能夠在瀏覽器訪問頁面
4. vue build App.vue 文件夾裏會生成dist文件夾，能夠用來部署

用於開發一個庫、組件，作一些小demo等都是很是適合的！

命令行建立新項目

1. vue create hello-vue，hello-vue是文件夾名字，若是不存在會自動建立文件夾，若是存在會安裝到那個文件夾中。
2. 開始彈出選擇模板，按上下鍵選擇

• default，默認配置，表示只有babel和eslint，選擇這項以後，直接建立項目，通常不用這個
• Manually select feature，表示手動配置，通常選擇這個
• 手動設置完以後，若是保存配置，這裏下次就會多個選項

• 

3. 選擇配置

• 空格鍵選中/反選，按a鍵全選/全不選，按i鍵反選已選擇項， 上下鍵 上下移動選擇。能夠根據項目大小和功能體驗配置不一樣的功能
• 選中router的時候，注意！！！在問Use history mode for router?建議選擇n，history的模式須要服務器的一些配合，若是後期要用再打開
• 選中css預處理器，若是是sass，建議選擇Sass/SCSS (with dart-sass)
• 選中lint/formatter（支持代碼風格檢查和格式化），我的偏好選擇eslint+prettier，standard規範究竟是啥，airbnb
• In dedicated config files表示babel,postcss,eslint的配置都是獨立的文件，通常選擇這個
• Save this as a preset for future projects? (Y/n) // 是否記錄一下以便下次繼續使用這套配置，須要的話輸入配置的名字

• 

• 

4. npm run serve打開瀏覽器看下

強烈推薦，圖形化新建、管理項目

這篇文章超棒了

下面的能夠不用看，沒上面寫的好，哈哈哈

1. vue ui在想要建項目的文件夾裏運行此命令，而後就是小白式看看點點

• 

• 

• 

2. 進入項目儀表盤

• 設置快速啓動項目 => 點擊右上角的 自定義 => 選擇 運行任務 => 選擇 完成 => 點擊 配置部件

• 

• 

• 

• 任務 => serve => 變量 => 可配置端口，環境變量，https開啓等具體配置，其餘任務也經過變量配置

• 

• 配置那邊，如設置部署路徑，輸出目錄之類的，Eslint規則修改

• 

• 

• 安裝依賴的話，注意選擇是開發仍是運行依賴

• 

• 

• 安裝插件

• 

• 

vuecli的使用
超詳細的vuecli