Vue CLI腳手架使用筆記

前言

本次操作實例各軟件版本如下：
1、Node： v10.15.0
2、npm：6.4.1
3、webpack：4.41.2
4、@vue/cli：4.0.5

1、安裝vue、vue-cli

1.1安裝vue

npm install -g vue

1.2 安裝vue cli

要求Node.js版本爲8.9以上。
vue cli包名稱已經由 vue-cli 改爲 @vue/cli，如果全局安裝了老版本，可以先卸載在重新安裝新版本。

npm install -g @vue/cli

2、項目開發

2.1 創建項目

1）創建項目

vue create my-proj

按Enter後進入下一步
2）選擇配置

 default (babel, eslint) //默認配置
 Manuall select features //手動配置 

• 使用方向鍵進行選擇

這裏爲了更清楚連接後續的配置選項，選擇手動配置
3）選擇所需功能
空格進行選擇或取消，按a全選，i反選

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel									//轉碼器			
 ( ) TypeScript								//支持typescipt語法
 ( ) Progressive Web App (PWA) Support		
 ( ) Router									//Vue路由
 ( ) Vuex									//支持Vuex
 ( ) CSS Pre-processors						//支持css預處理
 (*) Linter / Formatter						//支持代碼風格檢測和格式化
 ( ) Unit Testing							//支持單元測試
 ( ) E2E Testing							//e2ec端到端測試

選擇babel、router，vuex、css、linter等
4）是否使用hostory router：
Vue-Router 利用瀏覽器自身的hash模式和history模式的特性來實現前端路由。
hash： 瀏覽器url址欄 中的 # 符號（如這個 URL：http://www.abc.com/#/hello，hash 的值爲“ #/hello”），hash 不被包括在 HTTP 請求中（對後端完全沒有影響），因此改變 hash 不會重新加載頁面

history： 利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法（需要特定瀏覽器支持）。單頁客戶端應用，history mode 需要後臺配置支持

輸入n，選擇 hash

5）選擇css預處理器

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default
): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

選擇 less

6）代碼檢測工具

ESLint with error prevention only	//僅在由錯誤時提醒
  ESLint + Airbnb config			
  ESLint + Standard config
  ESLint + Prettier

選擇ESLint + Standard config

7)何時檢測

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
>(*) Lint on save				//保存時檢測
 ( ) Lint and fix on commit		//fix和commit時檢測

選擇 lint on save

8)如何存放配置

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files	//獨立文件
  In package.json			//存放到package.json

選擇 package.json

9)是否保存本次配置
保存後，後續項目可以直接用這個配置

Save this as a preset for future projects? (y/N)

選擇保存。

10）選擇保存後

Save preset as:

輸入一個proset名字

上述操作完了後，vue cli開始初始化工程

初始化完了後，用VS Code打開，看以下工程目錄

3、跑起來

npm run serve

E:\Dev\github\my-project>npm run serve

> my-project@0.1.0 serve E:\Dev\github\my-project
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 16154ms                                                                                                                21:45:52

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.104:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

等運行完後，在瀏覽器中打開http://localhost:8080/

至此，一個Vue項目就跑起來了。

4、添加自己的組件

項目跑起來了，現在來寫一個組件，並使用路由功能

4.1 定義組件

在 src/views目錄下，新建文件HelloGIS.vue
HelloGIS.vue

<template>
  <div>
    Hello GIS, Hello Map
  </div>
</template>

<script>
export default {
  name: 'HelloGIS'
}
</script>

4.2 修改路由配置

打開 src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

在 routers中添加一個對象

  {
    path: '/gis',
    name: 'gis',
    component: () => import('../views/HelloGIS.vue')
  }

使/gis地址 ，指向剛剛添加的HelloGIS.vue組件上.

4.3 修改App模板

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <!-- 導航到新添加的HelloGIS -->
      <router-link to="/gis">GIS</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

保存，重新打開頁面，看下效果

參考文檔：
官網文檔：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
博客：https://www.cnblogs.com/liuqiuyue/p/9699796.html