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