vue-cli 3.0.1 詳細入門教程

請事先裝好nodeJs

一、安裝vue-cli

npm install -g @vue/cli
# or
yarn global add @vue/cli

查看版本（是否安裝成功）：vue -V(大寫的V)

---

二、創建項目

vue create my-project

1. 如果是第一次安裝vue-cli 3.0，是沒有前面兩項的，只有default和Manually；
2. 按鍵盤上下鍵選擇默認（default）還是手動（Manually）；
3. 如果選擇default，一路回車執行下去就行了（注：現在vue-cli3.0默認使用yarn下載）；
4. 這里我選擇手動；

---

三、選擇配置

選擇自己所要集成的配置（格鍵是選中與取消，A鍵是全選，回車確定）
這里我的選擇如下

---

四、是否使用history路由模式，這里我選擇 Y

---

五、選擇css預處理器，這里我選擇 Stylus

---

六、選擇eslint 配置，這里我選擇 ESLint + Standard config

---

七、選擇什么時候執行eslint校驗，這里我選擇 Lint on save

---

八、選擇配置文件存放的位置，這里我選擇 In dedicated config files

---

九、是否保存之前的配置項，如果是則需要輸入保存名，如第二步所看到的我保存的名字為xia和vue3-demo，這里我選擇 N

---

十、回車確定后，等待下載依賴模塊

---

十一、裝好后，進入目錄，啟動

cd my-project // 進入項目根目錄
yarn serve // 啟動項目

---

十二、項目目錄，現在的目錄是3.0的cli看上去簡潔多了，去掉了2.0 build和config等目錄

---

十三、項目配置

在項目的根目錄下新建 vue.config.js 文件（是根目錄，不是src目錄）

module.exports = { publicPath: process.env.NODE_ENV === "production" ? "./" : "/", // 部署生產環境和開發環境下的URL outputDir: 'dist', // 構建輸出目錄(npm run build 或 yarn build 時 ，生成文件的目錄名稱) assetsDir: 'assets', // 用於放置生成的靜態資源(js、css、img、fonts)的;（項目打包之后，靜態資源會放在這個文件夾下） lintOnSave: true, // 是否開啟eslint保存檢測，有效值：ture | false | 'error' runtimeCompiler: false, // 是否使用包含運行時編譯器的Vue核心的構建 transpileDependencies: [], // 默認情況下 babel-loader 忽略其中的所有文件 node_modules,這里可增加例外的依賴包名 productionSourceMap: false, // 是否在構建生產包時生成 sourceMap 文件，false將提高構建速度 filenameHashing: false, //默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。你可以通過將這個選項設為 false 來關閉文件名哈希。(false的時候就是讓原來的文件名不改變) css: { // 配置高於chainWebpack中關於 css loader 的配置 modules: false, // 是否開啟支持 foo.module.css 樣式 extract: true, // 是否使用 css 分離插件 ExtractTextPlugin，采用獨立樣式文件載入，不采用 <style> 方式內聯至 html 文件中 sourceMap: false, // 是否構建樣式地圖，false 將提高構建速度 loaderOptions: { // css預設器配置項 sass: { data: '' //`@import "@/assets/scss/mixin.scss";` }, css: { // options here will be passed to css-loader }, postcss: { // options here will be passed to postcss-loader } } }, configureWebpack: (config) => { //webpack-bundle-analyzer 插件 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin if (process.env.NODE_ENV === 'production') { return { plugins: [ new BundleAnalyzerPlugin() ] } } }, // 支持webPack-dev-server的所有選項 devServer: { open: true, // 是否自動啟動瀏覽器 host: '0.0.0.0', port: 3000, // 端口號 https: false, hotOnly: false, proxy: null, // proxy: { // 配置多個代理 // '/api': { // target: '<url>', // ws: true, // changOrigin: true // }, // "/foo": { // target: "<other_url>" // } // }, before: app => {} }, parallel: require('os').cpus().length > 1, // 構建時開啟多進程處理 babel 編譯 pwa: { // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa }, pluginOptions: {} // 第三方插件配置 };