CLI

项目技术栈vue-cli + webpack + es6 | es7 + vue-router + axios | vue-resource +VueUI（mint-ui | element-ui | vant-ui | ...）

样式：bootstrap + jquery

各个文件的含义、

• build与config文件夹是webpack的配置模块化，有开发的配置（dev）与上线的配置（prod）；config中的index.js可以改自己到主机以及端口号
• src：源码
  • main.js：index.html中引入的js文件（入口文件），main.js和其他组件都是从main.js中独立出来的文件
  • app.vue填充public中index.html中的div.app
  • component组件文件夹
  • assets样式以及图片
  • views：路由相关组件（.vue）
• static：静态资源
• babellrc：配置
• editorconfig：编译器配置
• eslintgnore：eslint
• gitignore：git过滤
• postcsssrc：样式配置
• index.html ：index页面
• package:纪录项目以及依赖包
• readme：说明文档、
• yarn.lock:依赖包到纪录，提速。

一、初始化项目

使用vue ui 创建

直接在任何位置使用vue ui指令即可以ui的方式创建项目。
注意的点：

• 选择常用的功能：babel，vuerouter，linter，使用配置文件
• 保存预设

使用vue creat创建（比较繁琐）

vue create my-project

出现如下选项

• default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。
• Manually select features 手选preset(插件)。

选择手动选择preset时又如下选项

• TypeScript 支持使用 TypeScript 书写源码。
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 预处理器。
• Linter / Formatter 支持代码风格检查和格式化。
• Unit Testing 支持单元测试。
• E2E Testing 支持 E2E 测试。

? Use history mode for router? (Requires proper server setup for index fallback in production)

此处选择router的history或者flash模式
下一步，选择编译语言

Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus

选择代码规范检测节点，第一个保存检测，第二个fix和commit时检测

(*) Lint on save
( ) Lint and fix on commit (requires Git)

选择把babel,postcss,eslint这些配置文件放哪：第一个放在独立文件夹，第二个放在package.json文件中

In dedicated config files
In package.json

是否保存配置？

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

回车即可创建项目。

二、cli组件

• vue中定义组件:

const app={
template:``
}

• vue-cli中定义组件是直接以.vue结尾的就是组件，其中包含template，script和style文件（后两者可选）

cli中的组件引入

引入组件时，

• 2.x：

import App from ‘./App’

new Vue({

component:{App},
template:'<App/>'
})

• 3.x:

import App from ‘./App’
new Vue({

render h=>h(App)
}).$mount('App')

1.vant ui组件

Vant 是有赞开源的一套基于 Vue的 Mobile 组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。
引入方式分为完整引入和按需引入

• 完整引入
  1.安装依赖包 npm i vant -S
  2.main.js中引入依赖

import Vue from 'vue';
import Vant from 'vant';
import  'vant/lib/index.css';
Vue.use(Vant)

3.需要的地方使用组件

<van-button type="default">默认按钮<van-button>

除默认按钮外，还有primary（主要按钮）、info（信息按钮）、warning（警告按钮）、danger（危险按钮）

• 按需引入（减少项目体积）
  1.安装依赖包 npm i vant -S
  2.安装按需依赖包 npm i babel-plugin-import -D
  3.babel.config.js中配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

4.main.js中引入

import { Button } from 'vant';
Vue.use(button)

三cli中路由使用

1.使用步骤

1.使用import引入vue、vuerouter
2.使用Vue.use(VueRouter)注册
3.引入.vue类型的组件
4.实例化路由对象
5.配置路由规则
6.挂载路由
7.占坑router-view