vue-cli3.x建立及運行項目

時間 2020-07-07

標籤 vue cli3.x cli 建立運行項目简体版

原文原文鏈接

Node 版本要求css

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
建立項目：
```
vue create hello-world
```
接下來，是在知乎上學習到的知識，引用知乎的圖
default: 默認配置，只有bable和eslintnode

Manually select features: 手動配置
webpack
Babel：將ES6編譯成ES5web

TypeScript：JS超集，主要是類型檢查vue-cli

Progressive Web App（PWA）Support：漸進式WEB應用支持typescript

Router：路由npm

Vuex：狀態管理json

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
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。