07-Vue-Cli

Vue-Cli

一般脚手架工具都是全局安装，使用-g参数即可全局安装，使用时无需使用npx命令前缀

Vue-CLI是一个基于Vue.js进行快速开发的完整系统，使用npm install @vue/cli -D本地安装脚手架工具，使用npx vue create --help可查看脚手架的帮助信息

创建项目

1. 使用npx vue create 项目名 创建项目
2. 使用npx vue ui使用图形化界面进行项目创建和管理（若4.x版本报错可使用3.x）
3. 使用npm install @vue/cli-init -D之后，就可以使用npx vue init webpack 项目名创建vue-cli2.x的项目

Vue CLI v4.5.9
? Target directory xxx already exists. Pick an action: (Use arrow keys)
#目标目录xxx已存在，请选择一个动作（使用方向键）
> Overwrite #覆盖
  Merge     #合并
  Cancel    #取消
> Default ([Vue 2] babel, eslint)                 #Vue2默认配置，有babel和eslint
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) #Vue3默认配置，有babel和eslint
  Manually select features                        #手动选择特性
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
#检查项目所需的特性，(按<空格>选择，按<a>切换全部，按<i>反转选择)
>(*) Choose Vue version                #选择Vue版本
 (*) Babel                             #babel工具编译JavaScript
 ( ) TypeScript                        #TypeScript编译工具
 ( ) Progressive Web App (PWA) Support #渐进式WebApp支持
 (*) Router                            #Vue-Router
 (*) Vuex                              #VueX
 (*) CSS Pre-processors                #CSS预处理器
 (*) Linter / Formatter                #选择ESlint代码规范
 ( ) Unit Testing                      #单元测试工具
 ( ) E2E Testing                       #E2E测试工具
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
#选择您想要开始项目的Vue.js版本（使用方向键）
> 2.x
  3.x (Preview)
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
#使用 history 路由模式？（需要适当的服务器设置，以便在生产中进行索引回退）
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
#选择一个CSS预处理器（默认支持PostCSS、Autoprefixer和CSS模块）：（使用方向键）
> Sass/SCSS (with dart-sass)  #dart-sass编译sass
  Sass/SCSS (with node-sass)  #node-sass编译sass
  Less                        #less
  Stylus                      #Stylus
? Pick a linter / formatter config: (Use arrow keys)
#选择一个ESlint代码规范配置：（使用方向键）
  ESLint with error prevention only #ESlint只防止错误
> ESLint + Airbnb config            #Airbnb公司的版本ESlint
  ESLint + Standard config          #标准的ESlint
  ESLint + Prettie                  #漂亮的ESlint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
#选择额外Lint功能，(按<空格>选择，按<a>切换全部，按<i>反转选择)
 (*) Lint on save            #保存时仅Lint
>(*) Lint and fix on commit  #提交时Lint并自动修复
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
#你更喜欢将Babel, ESLint等的配置放在哪里？（使用方向键）
  In dedicated config files  #在专用配置文件中
> In package.json            #在package.json中
? Save this as a preset for future projects? (y/N)
#将其保存为未来项目的预置？若保存预设后会保存在用户家目录的vuerc文件中

1. 使用npm run serve启动项目
2. 使用npm run lint进行ESlint检测和修复
3. 使用npm run bilud打包项目

目录结构

• public目录中存放静态资源文件（原封不动的打包到dest文件夹中，使用webpack-dev-server时可访问到目录中的内容）
• src目录存放源代码文件，下面针对源代码目录结构进行解析

目录或文件名	描述
assets	项目静态资源目录（会被webpack进行编译打包）
router	Vue-Router配置目录
store	VueX配置目录
components	存放全局组件
views	存放页面级组件
App.js	根组件
main.js	项目入口js文件

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;	//生产模式，关闭提示

new Vue({
  router,
  store,
  render: (h) => h(App),	//脚手架使用的runtime版本的Vuejs，缺少了对字符串模板的编译，所以使用render函数进行渲染根组件
}).$mount('#app');

Vue组件文件

• 组件模板必须有根标签
• @是/src的别名
• script中暴露出去组件实例，最好定义组件名
• 要使用子组件需要先引入，再注册

<template>
  <div class="root">
    组件模板
    <hello-world></hello-world>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'; // 需要引入子组件

export default {
  name: 'Home',
  components: { // 注册子组件
    HelloWorld
  }
};
</script>
<style scoped lang="scss">
/* lang属性决定使用哪种CSS预处理器，scoped属性决定当前组件CSS只对当前组件有效 */
.root {
  color: red;
}
</style>

Vue-Router中异步组件

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',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    // 异步导入组件，并且使用魔法注释设置打包后的Chunk名
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

配置Vue-Cli

Vue-Cli对webpack进一步进行了封装，可在package.json同级目录下创建vue.config.js对Vue-Cli进行配置，常用配置如下：

module.exports = {
  publicPath: "./",	//公共路径前缀，默认是 / ,在windows打包后可能会资源路径找不到
  outputDir: "dist",	//打包输出目录，默认就是"dist"
  indexPath: "index.html",	//打包后的入口html文件相对于outputDir，默认就是"index.html"
  lintOnSave: true,	//是否在开发环境下在每次保存时lint代码，默认是"default"
  css: {
    sourceMap: true,	//是否开启CSS的SourceMap，默认是 false
  },
  runtimeCompiler: false,	//是否使用包含运行时编译器的Vue构建版本，若使用增加额外10kb大小，默认就是false
  transpileDependencies: [],	//babel-loader忽略编译的js文件（除node_modules外），默认就是空数组
  productionSourceMap: false,	//生产环境下是否使用SourceMap，默认是true
  configureWebpack: {},	//对webpack的配置，则会使用webpack-merge工具合并到最终的配置中
  devServer: {}	//对webpack-dev-server进行配置
}