-
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。如果你已經全局安裝了舊版本的
vue-cli(1.x 或 2.x)，你需要先通過npm uninstall vue-cli -g或yarn global remove vue-cli卸載它。 -
重新安裝vue-cli，將是最新的vue-cli版本npm install -g @vue/cli
- 安裝完后使用命令：
vue --version
查看安裝的版本號，以及是否安裝成功
- 創建項目：
vue create hello-world
- 接下來，是在知乎上學習到的知識，引用知乎的圖
-
default: 默認配置，只有bable和eslint
Manually select features: 手動配置
-
Babel：將ES6編譯成ES5
TypeScript：JS超集，主要是類型檢查
Progressive Web App（PWA）Support：漸進式WEB應用支持
Router：路由
Vuex：狀態管理
Linter/ Formatter：代碼檢查工具
CSS Pre-processors：css預編譯 (稍后會對這里進行配置)
Unit Testing：單元測試，開發過程中前端對代碼進行自運行測試
E2E Testing: 端對端測試，屬於黑盒測試，通過編寫測試用例，自動化模擬用戶操作，確保組件間通信正常，程序流數據傳遞如預期。
- 使用什么css預編譯器：
- 代碼檢查工具：
tslint: typescript格式驗證工具（如果前面選擇了TypeScript會有這一項）
eslint w...: 只進行報錯提醒；（如果還沒熟悉eslint,推薦使用此模式）
eslint + A...: 不嚴謹模式；
eslint + S...: 正常模式
eslint + P...: 嚴格模式；
- 代碼檢查方式：（我都選了）
- 所有的依賴目錄的配置放置的位置（一般都是package.json）
- 在這里，項目的創建就算是完成了。
- 但是，vue-cli3與2的版本有很大區別，其中之前的build目錄取消，也就沒有了我們之前用的配置文件，那么我們需要在vue-cli3項目手動添加vue.config.js(在根目錄下)
- 配置vue.config.js:
// vue.config.js const path = require('path') const webpack = require('webpack') module.exports = { // baseUrl從vue cli 3.3起已經棄用了，用publicPath來代替 publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', // 部署應用包時的基本URL(這里可以看一下官方說明) outputDir: 'dist', // 打包時生成的生產環境構建穩健的目錄 assetsDir: 'static', // 放置生成的靜態資源的目錄 filenameHashing: true, lintOnSave: true, // eslint-loader會將lint錯誤輸出為編譯警告 productionSourceMap: false, // 如果你不需要生產環境的source map，可以將其設置為false，以加速生產環境的構建 configureWebpack: { // 簡單/基礎配置，比如引入一個新插件 plugins: [] }, chainWebpack: config => { // 鏈式配置 }, css: { // css預設器配置項 loaderOptions: { css: { }, postcss: { } } }, devServer: { open: true, host: '127.0.0.1', port: 8080, https: false, hotOnly: false, proxy: null, // proxy: { // '/api': { // target: '<url>', // ws: true, // changOrigin: true // } // }, before: app => {} }, // 第三方插件配置 pluginOptions: {} }
- 項目的目錄的參考：
### 項目目錄結構
├── public // 靜態資源
├── src // 源代碼
│ ├── api // 所有請求
│ ├── assets // 主題 字體等靜態資源
│ ├── components // 全局公用組件
│ ├── models // 實體類
│ ├── router // 路由及路由配置相關
│ ├── store // 全局 store管理
│ ├── utils // 全局公用方法
│ ├── pages // view
│ ├── App.vue // 入口頁面
│ ├── main.js // 入口 加載組件 初始化等
├── tests // jest測試
├── .eslintrc.js // eslint配置
└── package.json - Vue CLI >= 3 和舊版使用了相同的
vue命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的vue init功能，你可以全局安裝一個橋接工具：
npm install -g @vue/cli-init # `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同 vue init webpack my-project
- 接下來就是運行項目了：
cd hellow-world npm run serve