# __601 vue-cli 起步

1.vue-cli

- 基本使用

__ 1.安装全局的工具包

npm i @vue/cli -g

__ 2.查看版本

vue -V    ||  vue --version

‍

__ 3.创建项目

-- cmd 创建

vue create vue2-pro

‍

-- 可视化创建

vue ui

‍

-- 使用旧版 vue/cli

npm i -g @vue/cli-init
vue init webpack vue2-pro1

‍

-- vue/cli 预设存放路径

c:/user/用户名/.vuerc

‍

2.项目结构

- node_modules 依赖包

- public 静态资源托管

- src 源码

  - assets

    - js

    - images

    - font

    - css

  - components 存放自定义组件

  - plugins 存放 ui

  - router 存放路由

  - views | pages 存放路由组件

  - App.vue 入口组件

  - main.js 入口文件  --vue 引入的阉割版

  - utils 工具类

  - store 状态管理

  - mixins 抽离公共的功能 混入

  - filters 过滤器

  - directives 自定义指令

- eslintrc.js 配置 eslint 的规则

- prettierrc.json 设置格式化的规范

- babel.config.js 配置插件

- vue.config.js 配置 webpack 相关

‍

3.eslint 规范代码 prettier 格式化代码

.eslintrc.js  // 配置完记得重启

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 关闭驼峰式命名
    'vue/multi-word-component-names': 'off',
    // 关闭语法警告
    'prettier/prettier': [
      'off',
      {
        singleQuote: true,
      },
    ],
  },
};

.prettierrc.json  // 配置完记得重启

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 200,
  "tabWidth": 2,
  "singleAttributePerLine": true
}

‍

4.使用 less / sass 预编译语言

npm i less less-loader -D
<style lang='less' scoped></style>  // scoped 开启样式作用域 样式只作用在当前组件 防止样式穿透

npm i node-sass sass-loader -D
<style lang='scss'></style>

‍

5.手写路由

npm i vue-router

1.引入 vue-router    import VueRouter from 'vue-router'

2.引入组件  import Com... from '@/views/..'

3.注册路由  Vue.use(VueRouter)

4.实例化路由对象 new VueRouter

5.配置路由规则  const routes

6.挂载路由    -- 设置路由和 vue 的关系

7.渲染路由    -- router-view router-link

一键添加路由

vue add vue-router