Vue Cli3 創建項目

lifefriend_007 發布于2019-08-23 12:20 / 1763人閱讀

摘要：創建項目安裝創建一個項目默認套餐，提供和支持。自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持，就應該選擇這一項。支持使用書寫源碼。支持代碼風格檢查和格式化。

Vue Cli3 創建項目

Vue,Markdown

1. 安裝

npm install -g @vue/cli

2. 創建一個項目

vue create iview-admin
# OR
vue ui

default (babel, eslint) 默認套餐，提供 babel 和 eslint 支持。

Manually select features 自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript ，就應該選擇這一項。

TypeScript 支持使用 TypeScript 書寫源碼。

Progressive Web App (PWA) Support PWA 支持。

Router 支持 vue-router 。

Vuex 支持 vuex 。

CSS Pre-processors 支持 CSS 預處理器。

Linter / Formatter 支持代碼風格檢查和格式化。

Unit Testing 支持單元測試。

E2E Testing 支持 E2E 測試。

3. 運行項目

$ npm run serve

4. 在根目錄創建 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",
    // 自動打開瀏覽器
    open: true,
    host: "0.0.0.0",
    port: 8080,
    https: false,
    hotOnly: false,
    // 處理跨域問題
    proxy: {}, // 設置代理
    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}

具體請查看 Vue Cli 官網

License

可以拷貝、轉發，但是必須提供原作者信息，同時也不能將本項目用于商業用途。

云服務器 GPU云服務器云服務器搭建vue項目騰訊云服務器部署vue項目 vue項目放到云服務器上阿里云服務器搭建vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98346.html

Vue CLI3.0 中使用jQuery 和 Bootstrap

摘要：中使用和不是特別符合原生的寫法，但是有時候又要用，所以放上我的引入設置，供大家參考。其中用于在中顯示彈窗提示下拉菜單，所以需要引入。因為我的文件經過了我自己的調整，所以單獨放在文件夾中做單獨引入。 Vue 中使用 jQuery 和 Bootstrap 不是特別符合 Vue 原生的寫法，但是有時候又要用，所以放上我的引入設置，供大家參考。在 Vue CLI2.0 中引入 jQuery ...

luqiuwen 2019-08-23 15:32 評論0 收藏0
Vue運行時全解析 - VueCLI3上手（一）

摘要：可以譯作運行時過程全面分析和解析，這個全面分析涉及到比較基礎的或者復雜的重要前端概念和中的概念等。注本篇是運行時全解析系列文章的第一篇，首次發表于，友善轉載蟹蟹。附更多內容請參考核心維護者蔣豪群同學的的公開課視頻 Vue Runtime Full Analysis - VueCLI3 Get Start VRFA: (Vue Runtime Full Analysis) 可以譯作vue...

molyzzx 2019-08-23 12:04 評論0 收藏0
Vue運行時全解析 - Vue的引入（二）

摘要：因為僅僅包含運行時編譯比完整版少的代碼體積，如果你需要使用完整包也是可以的，你需要調整配置。顯式的改變運行時引用包模塊在引入時做了什么看完了這幾個文件的用途之后我們再來看看引入的時候做了什么帶著這個疑問我們繼續探索。 Vue Runtime Full Analysis - Import Vue Module 回顧系列文章之《VueCLI3上手》上一節《Vue運行時全解析 - Vue...

jiekechoo 2019-08-23 12:03 評論0 收藏0
Spring Boot [Vue + Vue CLI3 + Vant 快速構建你的移動商城]

摘要：導讀記錄一次基于原有的后端構建移動端商城，參照已有的安卓應用設計圖開發。導讀記錄一次基于原有的后端api構建移動端商城，參照已有的安卓應用UI設計圖開發。技術選型后端 Spring Cloud OAuth2 + Spring Cloud Eureka + Spring Boot 前端 Vue + Vue Router + Vue CLI3 + Vant ；移動商城從技術選型到項...

Eidesen 2019-08-16 13:29 評論0 收藏0
vue cli3 構建的項目中使用高德地圖

摘要：高德文檔梳理首先，我們要加載外部，在外部加載完畢，然后初始化地圖。加載外部你的初始化地圖初始化地圖的前提是，成功加載外部，然后使用高德提供的對象來構造實例。高德文檔 https://lbs.amap.com/api/java... 梳理首先，我們要加載外部js，在外部js加載完畢，然后初始化地圖。加載外部js showImg(https://segmentfault.com/im...

he_xd 2019-08-23 16:26 評論0 收藏0