vue/cli 3.0腳手架搭建

時間 2019-11-12

標籤 vue cli 3.0 腳手架搭建简体版

原文原文鏈接

在vue 2.9.6中，搭建vue-cli腳手架的流程是這樣的： css

首先全局安裝vue-cli，在cmd中輸入命令:html

npm install --global vue-cli vue

安裝成功：
node

安裝完成以後輸入 vue -V（注意這裏是大寫的「V」），以下圖，若是出現相應的版本號，則說明安裝成功。
webpack

而後就能夠構建項目了，依次輸入命令：git

vue init webpack 「名稱」
cd 名稱（進入到建立的項目中）
npm install (安裝項目的依賴)
npm run dev (啓動項目)

而後在瀏覽器中輸入localhost:8080就能夠啓動咱們建立的項目啦github

此時，咱們在 package.json能夠看到的版本信息：
web

構建好的項目目錄是這樣的：
vuex

Vue CLI 3.0搭建

現在，官方文檔已經升級3.0，在 vue-cli 3.0中，咱們須要從新配置：vue-cli

若是你已經安裝了vue 2.9.6 的話，則須要先將其刪除：指令爲：npm uninstall -g vue-cli

提示：Vue CLI要求Node.js版本8或者更高（8.10.0+ 推薦）。

第二步：更新Vue-cli 指令：npm install -g @vue/cli 或 cnpm install -g @vue/cli 或 yarn global add @vue/cli
（這裏我用的 cnpm 安裝的，國內的淘寶鏡像速度會快許多…），安裝成功則顯示：

安裝以後，記得查看版本號：查看版本（是否安裝成功）：vue -V (大寫的V)

接下來就能夠構建項目了，輸入指令：vue create test （test爲項目名）；

與 2.0 不一樣的是這裏再也不是選擇模板，而是預設 presets

默認配置

選擇 [默認] 將直接開始安裝

自定義配置

選擇 [自定義]
方向鍵上下移動，空格選中，Enter肯定，自定義配置中，您將會看到這些配置項：

自定義細節配置

是否使用class風格的組件語法
是否使用babel作轉義
選擇CSS預處理類型
選擇語法檢測規範
選擇保存時檢查 / 提交時檢查
選擇配置信息存放位置，單獨存放或者併入package.json
是否保存當前預設，下次構建無需再次配置

完成安裝

3.0 的基本目錄結構相對 2.0 精簡了很多（應該說是最精簡的目錄了～）

public至關於原來的static，裏面的index.html是項目的入口
src同之前同樣

cli3.0沒有build和config了，
想要配置的話，須要在項目根目錄下建立vue.config.js文件
(反正官方文檔這麼說~)

再看一下 src 裏面的目錄結構：

配置文件去哪了？

以前的build和config文件夾不見了，那麼應該如何配置如webpack等的配那？
只須要在項目的根目錄下新建 vue.config.js 文件（是根目錄，不是src目錄）

語法

例如： module.exports = {
 // 基本路徑 baseUrl: '/',  // 輸出文件目錄 outputDir: 'dist',  // eslint-loader 是否在保存的時候檢查 lintOnSave: true,  // use the full build with in-browser compiler?  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only compiler: false,  // webpack配置  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {},  // vue-loader 配置項  // https://vue-loader.vuejs.org/en/options.html vueLoader: {},  // 生產環境是否生成 sourceMap 文件 productionSourceMap: true,  // css相關配置 css: {  // 是否使用css分離插件 ExtractTextPlugin extract: true,  // 開啓 CSS source maps? sourceMap: false,  // css預設器配置項 loaderOptions: {},  // 啓用 CSS modules for all css / pre-processor files. modules: false },  // use thread-loader for babel & TS in production build  // enabled by default if the machine has more than 1 cores parallel: require('os').cpus().length > 1,  // 是否啓用dll  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode dll: false,  // PWA 插件相關配置  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {},  // webpack-dev-server 相關配置 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // 設置代理 before: app => {} },  // 第三方插件配置 pluginOptions: {  // ... } }