vue-cli3.0搭建與配置

爲什麼要使用 vue-cli3.0

模板更加制定化
配置更加簡潔

如何新建項目

使用 npm 全局安裝 vue-cli ：

npm install -g @vue/cli //如果已經安裝過就不用安裝了
我自己喜歡用yarn 安裝
2 yarn global add @vue/cli

創建項目執行：

vue create my-project//my-project 就是你自己隨意起的一個文件夾名字

選擇項目類型

Vue CLI v3.0.0-beta.6
? Please pick a preset: (Use arrow keys)
> xs-default (vue-router, vuex, stylus, babel, pwa, eslint, unit-jest) // 這是我運行過之後的默認設置，第一次執行create是沒有的
  default (babel, eslint)
 > Manually select features  //我選的是手動安裝  因爲不喜歡用eslint 如果實在是不幸裝了這個 就在自己配置的vue.config.js裏面去加一行代碼    lintOnSave:false, 表示關閉格式化檢查

// 注：按鍵盤上下鍵選擇默認（default）還是手動（Manually），
//如果選擇default，一路回車執行下去就行了（注：現在vue-cli3.0默認使用yarn下載），這裏我選擇手動，

選擇特性支持


? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript                                 // 支持使用 TypeScript 書寫源碼
 ( ) Progressive Web App (PWA) Support          // PWA 支持
 ( *) Router                                     // 支持 vue-router
 ( ) Vuex                                       // 支持 vuex
 (* ) CSS Pre-processors                         // 支持 CSS 預處理器。
 ( *) Linter / Formatter                         // 支持代碼風格檢查和格式化。
 ( ) Unit Testing                               // 支持單元測試。
 ( ) E2E Testing                                // 支持 E2E 測試。

 // 注意：你要集成什麼就選就行了（注：空格鍵是選中與取消，A鍵是全選）
//打*是我的選的配置

選擇css預處理，這裏我選擇less


? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
 SCSS/SASS
> LESS
  Stylus

選擇ESLint + Prettier


? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
//這裏逃脫不了感覺, 所以最後還是自己配一個vue.config.js吧  然後這裏去關閉eslint

選擇語法檢查方式，這裏我選擇保存就檢測


Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(* ) Lint on save // 保存就檢測
 ( ) Lint and fix on commit // fix和commit時候檢查

選擇單元測試


Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
  Jest

她會問你，把babel,postcss,eslint這些配置文件放哪，這裏隨便選，我選擇放在獨立文件夾


Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 獨立文件放置
  In package.json // 放package.json裏
//這兩個我都放過 我覺得無所謂吧  看個人習慣

鍵入N不記錄，如果鍵入Y需要輸入保存名字，如第一步所看到的我保存的名字爲xs-default


Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (Y/n) // 是否記錄一下以便下次繼續使用這套配置

確定後，等待下載依賴模塊

啓動項目

初始完之後，進入到項目根目錄： cd my-project
啓動項目：npm run serve 或者是yarn serve
在瀏覽器輸入http://localhost:8080就可以看到vue的歡迎界面

打包上線

vue-cli 也提供了打包的命令，在項目根目錄下執行： npm run build
執行完之後，可以看到在項目根目錄下多出了一個 dist 目錄，該目錄下就是打包好的所有靜態資源，直接部署到靜態資源服務器就好了。

項目的大致目錄結構

現在的目錄是3.0的cli看上去簡潔多了，去掉了2.0 build和config等目錄
關於代碼編寫基本上與vue2的目錄結構相差不大

注意：

如果想要修改端口號以及webpack配置，需要你在根目錄下面創建一個vue.config.js

vue.config.js完整默認配置

module.exports = {
  /** 區分打包環境與開發環境
   * process.env.NODE_ENV==='production'  (打包環境)
   * process.env.NODE_ENV==='development' (開發環境)
   * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
   */
 // 基本路徑
 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: () => {},
 //如果想要引入babel-polyfill可以這樣寫
 // configureWebpack: (config) => {
 //   config.entry = ["babel-polyfill", "./src/main.js"]
 // },
 // 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: '127.0.0.1',
  port: 8080,//我個人喜好用3000
  https: false,
  hotOnly: false,
  proxy: null, // 設置代理
  before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
  // ...
 }
}

後記：

當你準備着手一個新的項目的時候，請事先想清楚這個項目的架構以及用到的ui組件等等
比如我們的項目

1. 使用vant UI組件
2. 封裝axios服務
3. 使用路由拆分（基於history）
4. 路由切換動畫
。。。
反正感覺這個 我應該自己還會再加東西 因爲vue.config.js裏面的baseURL 感覺還沒有配完  但是在上線之前 不用配vue.config.js  到時候再補吧

vue-cli3.0 喫過的坑

vue-cli3.0搭建與配置

爲什麼要使用 vue-cli3.0

如何新建項目

使用 npm 全局安裝 vue-cli ：

創建項目執行：

選擇項目類型

選擇特性支持

選擇css預處理，這裏我選擇less

選擇ESLint + Prettier

選擇語法檢查方式，這裏我選擇保存就檢測

選擇單元測試

她會問你，把babel,postcss,eslint這些配置文件放哪，這裏隨便選，我選擇放在獨立文件夾

鍵入N不記錄，如果鍵入Y需要輸入保存名字，如第一步所看到的我保存的名字爲xs-default

確定後，等待下載依賴模塊

啓動項目

打包上線

項目的大致目錄結構

注意：

vue.config.js完整默認配置

後記：

continue 的一種用法

金額數字轉中文大寫

時間日期的常用封裝

三個數裏的最小值判斷

vue-cli3.0 喫過的坑

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

vue-cli3.0 喫過的坑

vue-cli3.0搭建與配置

爲什麼要使用 vue-cli3.0

如何新建項目

使用 npm 全局安裝 vue-cli ：

創建項目執行：

選擇項目類型

選擇特性支持

選擇css預處理，這裏我選擇less

選擇ESLint + Prettier

選擇語法檢查方式，這裏我選擇保存就檢測

選擇單元測試

她會問你 ，把babel,postcss,eslint這些配置文件放哪，這裏隨便選，我選擇放在獨立文件夾

鍵入N不記錄，如果鍵入Y需要輸入保存名字，如第一步所看到的我保存的名字爲xs-default

確定後，等待下載依賴模塊

啓動項目

打包上線

項目的大致目錄結構

注意：

vue.config.js完整默認配置

後記：

她會問你，把babel,postcss,eslint這些配置文件放哪，這裏隨便選，我選擇放在獨立文件夾