vue环境搭建、项目应用

1、网络不是很好时，首先安装cnpm淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、搭建vue环境

vue官网：https://v2.cn.vuejs.org/

#初始化项目
npm init -y

#安装vue脚手架
cnpm i -D @vue/cli  
cnpm i -D @vue/cli@4.5.15

#查看脚手架版本
npx vue -V

#创建项目的两种方式
#1、使用命令创建
npx vue create project_vue2
#2、使用界面创建
npx vue ui

3、安装elementui插件（饿了么公司基于vue开的的vue的Ui组件库）

elementui官网：https://element.eleme.cn/#/zh-CN/component/quickstart

#-S表示  --save
cnpm i element-ui@2.15.8 -S

#引入整个element UI的css 和 插件两种方式，全局引入和按需引入 (main.js)
#引入
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

#挂载
Vue.use(Element)

#按需引入  main.js
#安装插件
cnpm install babel-plugin-component -D

import { Button, Tag } from 'element-ui'
#挂载
Vue.use(Button)
Vue.use(Tag)

#将组件模块化  element-ui
1、在babel.cinfig.js中配置插件
  "plugins": [
    //按需引入element-ui时，需要配置插件
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
2、新建element.js，引入需要的组件，并挂载
import Vue from 'vue'
import { Button,Tag } from 'element-ui'

Vue.use(Button)
Vue.use(Tag)

3、在mian.js中引入
import '../plugins/element.js'

4、css预处理器（饿了么公司基于vue开的的vue的Ui组件库）

查看版本对应，否则会有很多兼容问题：https://www.npmjs.com/package/node-sass

1、安装  注意node版本必须是v14.*，此处使用v14.19.1
cnpm i sass-loader@8.0.0 node-sass@4.14.1 -S

2、在style中使用lang="scss" 可以支持嵌套写法
<style lang="scss">
  .hello{
    background-color: yellow;
    //scss支持嵌套样式
    .el-button{
      color: red;
    }
  }
</style>

3、使用less预处理
cnpm i less@3.13.1 less-loader@7.3.0 -S
<style lang="less">
  .hello{
    background-color: yellow;
    //scss支持嵌套样式
    .el-button{
      color: red;
    }
  }
</style>

5、css样式重置

官网地址：https://meyerweb.com/eric/tools/css/reset/

1、在assets静态资源目录css下新建reset.css文件，将官网的内容粘贴进入
2、在App.vue中引入
<style lang="scss">
    @import url('./assets/css/reset.css');
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
</style>

6、图标库安装使用

官网地址：https://www.bootcss.com/p/font-awesome/

1、安装
cnpm i font-awesome -D
2、在mian.js中引入样式文件
import 'font-awesome/css/font-awesome.min.css'
3、使用，在页面中使用class="fa fa-user"

7、安装请求插件axios

1、安装
cnpm i axios -D/S
2、在main.js中引入并挂载到原型，可以在全局使用
import axios from 'axios'
Vue.prototype.axios = axios;

8、安装路由router

1、安装
cnpm i vue-router@3.5.3 -S
2、在main.js引入路由
import Router from './router/index.js'

9、路由懒加载和异步组件

export default new Router({
    routes:[
        {
            path : '/',
            redirect : '/login',
            // 官方推荐的路由懒加载写法，不需要引入组件了
            component : () => import ('@/components/Login')
        } ,
        {
            path : '/login',
            name : 'Login',
            // 官方推荐的路由懒加载写法，不需要引入组件了
            component : () => import ('@/components/Login')
        } ,
        {
            path : '/home',

            //【一般组件路由写法】
            // component : Home,

            // 官方推荐的路由懒加载写法，不需要引入组件了
            // component : () => import ('@/components/Home')

            //使用异步组件
            component : resolve => require(['@/components/Home'],resolve)            
        }
    ]
    //路由模式分history/hash
    ,mode:'history'
})

10、表单验证

vscode中安装any-rule插件，使用F1可以获取正则