Vue Cli3.0可視化構建工具——Vue UI

Vue Cli3.0可視化構建工具——Vue UI

1、安裝環境

安裝了最新的Vue CLI。打開Terminal，輸入： npm install -g @vue/cli or yarn global add @vue/cli

使用-V來查看剛剛安裝的版本： vue -V 3.0.0-rc.10

更新vue-cli以後，以前的2.0版本的構建方式就不可用了 須要再下載

yarn global add @vue/cli-init

初始化Vue UI，在一個乾淨的目錄下輸入：

vue ui

該命令自動打開瀏覽器，顯示以下界面

2、添加項目

添加新項目有兩種方式

1.可視化添加

可視化添加

若是保存過自定義項目配置，開始建立時，會在第一個選項顯示；配置的選項會同步到vue.config.js這個文件中

點擊建立項目以後，能夠保存這次配置，在之後建立項目時使用相同配置

跳過這次步驟，開始下載相關插件，此時命令行同步下載，可視化工具經過操控命令行來新建項目

2.命令行添加

vue create <project-name>

? Please pick a preset: (Use arrow keys)
❯ my-test (vue-router, vuex, sass, babel, eslint)
  default (babel, eslint)
  Manually select features
  
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
 
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): SCSS/SASS
? 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
 ? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) n
複製代碼

按下空格鍵進行選取

Vue CLI v3.0.0-rc.10
✨  Creating project in /Users/zjy/ttt.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.0.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
⠐ @babel/highlight@7.0.0-beta.47
複製代碼

開始構建項目

3、工具分析

1.插件

安裝完成以後，能夠查看項目下安裝的插件，能夠添加其餘插件

2.依賴

查看項目依賴的資源，能夠直接查看相關官網或源碼

3.配置

可對項目進行配置，配置的選項會在vue.config.js中

4.任務

能夠本地調試，打包，

對項目進行性能分析

4、Vue Cli3項目結構分析

少了不少文件夾，目錄結構更加清晰，vue-cli2.0中的build，config統一到了vue.config.js中 移除了static文件夾，添加了public Src中添加了views文件夾，用來存放視圖組件，components中存放公共組件

1.vue.config.js配置

參考文檔：配置文檔

module.exports = {
 baseUrl: '/',
 outputDir: 'dist',
 lintOnSave: true,
 compiler: false,
 // 調整內部的 webpack 配置。
 // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // 配置 webpack-dev-server 行爲。
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
  proxy: null, // string | Object
  before: app => {}
 }
 ....
}
複製代碼