小編給大家分享一下vue-cli3怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出拜泉免費(fèi)做網(wǎng)站回饋大家。

簡介

Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)

使用

<!-- 安裝 -->
npm install -g @vue/cli
<!-- 創(chuàng)建項(xiàng)目 -->
npm create new-cli

然后就是配置,可默認(rèn)(babel,eslint),自定義

自定義有 babel ts pwa vue-router vuex css預(yù)處理 以及Linter/Formatter,unit testing e2e testing

1. 選了router 會(huì)再次選是否用history模式

2. 在這里選了css預(yù)處理又會(huì)讓選 less scss stylus

3. eslint 又有幾項(xiàng)

1. 只防止出錯(cuò)

2. airbnb 配置

3. 標(biāo)準(zhǔn)配置

4. eslint +prettier

4. 還有一項(xiàng)是把配置文件如babel,postCss eslint 放單獨(dú)文件,還是放package.json里,當(dāng)然單獨(dú)了

5. 最后有個(gè)保存配置,以后用

然后就是安裝依賴

目錄如下

沒有cli2版本的build和config,多個(gè)babel.config.js

官網(wǎng)介紹是可以新建個(gè)vue.config.js進(jìn)行相關(guān)webpack配置,比如

// vue.config.js
module.exports = {
 configureWebpack: {
  plugins: [
   new MyAwesomeWebpackPlugin()
  ]
 },
 //loader
  chainWebpack: config => {
  config.module
   .rule('vue')
   .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
     // 修改它的選項(xiàng)...loader
     return options
    })
 },
 //生產(chǎn)環(huán)境關(guān)閉map
 productionSourceMap:false,
 //基本URL
 baseUrl: process.env.NODE_ENV === 'production'
  ? 'http://www.baidu.com'
  : 'https://www.google.com',
 outputDir:'dist', //build 目錄
 assetsDir:'',//asset目錄
 indexPath:'index.html',//指定index.html 路徑
 filenameHashing:true,//文件名帶hash
// multi-page模式,每個(gè)“page”應(yīng)該有一個(gè)對應(yīng)的 JavaScript 入口文件
 pages: {
  index: {
   // page 的入口
   entry: 'src/index/main.js',
   // 模板來源
   template: 'public/index.html',
   // 在 dist/index.html 的輸出
   filename: 'index.html',
   // 當(dāng)使用 title 選項(xiàng)時(shí)，
   // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
   title: 'Index Page',
   // 在這個(gè)頁面中包含的塊，默認(rèn)情況下會(huì)包含
   // 提取出來的通用 chunk 和 vendor chunk。
   chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  // 當(dāng)使用只有入口的字符串格式時(shí)，
  // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
  // 并且如果找不到的話，就回退到 `public/index.html`。
  // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
  subpage: 'src/subpage/main.js'
 },
 //css配置
 css: {
  sourceMap:false,//css source map
  loaderOptions: {
   css: {
    // 這里的選項(xiàng)會(huì)傳遞給 css-loader
   },
   postcss: {
    // 這里的選項(xiàng)會(huì)傳遞給 postcss-loader
   }
  }
 },
 //dev server
 devServer: {
  host:127.0.0.1
  port:8000,
  proxy: 'http://localhost:4000',
  overlay: {
   warnings: true,//警告
   errors: true//錯(cuò)誤
  }
 }


}

其他

1. 可使用vue serve和vue build 對單個(gè)vue文件快速開發(fā)

2. vue ui 圖形化界面創(chuàng)建管理項(xiàng)目

以上是“vue-cli3怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：vue-cli3怎么用
文章路徑：http://www.chinadenli.net/article22/ispscc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站策劃、微信小程序、Google、網(wǎng)站排名、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)