vue-cli3 第三版安裝搭建項目

Vue CLI是一個用於快速Vue.js開發的完整系統

3.X較2.X結構變了很多，更優雅，開發體驗更好

官方：https://cli.vuejs.org/guide/

安裝：https://cli.vuejs.org/guide/installation.html

# 安裝
npm install -g @vue/cli

# 查看已安裝版本
vue --version 或者 vue -V

# 卸載
npm uninstall @vue/cli -g

# 新建項目 vue create my-project # 項目啟動 npm run serve

# 打包
npm run build

一、自定義安裝項目crm-vue：

vue create crm-vue

 配合VSCODE

 

你希望在哪里配置Babel，PostCSS，ESLint？

第一個是：放獨立文件放置

第二個是：放package.json里

 

默認用http://localhost:8080/，上圖，安裝成功

 

二、自定義配置（不同於2.X版本）：

 在項目根目錄新建文件  vue.config.js 粘貼以下示例：

module.exports = {
  devServer: {
    port: 8085, // 端口號
    host: "localhost",
    https: false, // https:{type:Boolean}
    open: true, //配置自動啟動瀏覽器
    // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
    proxy: {
      "/api": {
        target: "<url>",
        ws: true,
        changeOrigin: true
      },
      "/foo": {
        target: "<other_url>"
      }
    } // 配置多個代理
  }
};

示例配置會覆蓋默認，在ctrl + c 重啟后 會自動打開為 http://localhost:8085

 

---

 

1.   關閉 ESLINT 代碼檢查在 vue.confit.js 中如下紅色配置

module.exports = {
  devServer: {
    port: 8088, // 端口號
    host: "localhost",
    https: false, // https:{type:Boolean}
    open: false, //配置自動啟動瀏覽器
    // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
    proxy: {
      "/api": {
        target: "<url>",
        ws: true,
        changeOrigin: true
      },
      "/foo": {
        target: "<other_url>"
      }
    } // 配置多個代理
  },
  lintOnSave: false // 關閉eslint代碼檢查
};

2. VUE-CLI3 引入 jquery  

https://blog.csdn.net/ai520587/article/details/84098601 

 

 

 

前端E2E測試框架 cypress了解一下

更多CLI3移步