安装Vue

局部安装

局部安装并使用vue-cli 4.x版本,和创建项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 先创建一个文件夹
# 初始化一个node项目
npm init -y

# 局部安装vue
npm i -D @vue/cli

# 查看vue的版本
# 局部安装要用npx命令
C:\Users\mmzcg\WebstormProjects>npx vue -V
@vue/cli 5.0.8

# 创建一个项目
# 为啥不能用npm运行
npx vue create project-one

# 进入项目并且运行
cd project-one
npm run serve

# 也可以用ui
npx vue ui

全局安装

1
2
3
4
5
npm install -g @vue/cli

vue create my-project

vue ui

Vue脚手架官网

1
2
3
4
5
6
7
8
9
10
11
12
# 安装脚手架
# 会有选项
pnpm create vue@latest

# 进入项目
cd vue-project

# 安装依赖
pnpm install

# 运行项目
pnpm dev

安装Element-UI

全局安装

1
2
3
4
5
6
# 安装
# npm
npm i element-ui -S

# pnpm
pnpm add element-ui -S
1
2
3
4
// main.js 使用
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

按需引入

1
2
3
# 安装
npm i element-ui -S
npm install babel-plugin-component -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// main.js
// 全局引入
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)

// 按需引入
import {Button} from 'element-ui'
Vue.use(Button)

// babel.config.js
module.exports = {
	// 自动生成的
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
	// 从官网上复制的
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

如果没有找到.babelirc文件,找找babel.config.js文件

一个一个import 按需引入有点麻烦,在根目录下面创建一个plugins文件夹,在这个文件夹下面创建element.js

1
2
3
import Vue from 'vue'
import {Button} from 'element-ui'
Vue.use(Button)

在main.js引入element.js

1
import '../element.js'

安装CSS预处理器

Sass

安装的是sass,使用的时候是scss…. 留意

1
2
npm install --save-dev node-sass
npm install --save-dev sass-loader
1
2
3
4
5
6
7
8
# 注意这里是scss
<style scoped lang="scss">
.hello{
  background: yellow;
  .el-button{
    color: red
  }
}

Less

1
2
npm i less less-loader --save-dev
npm i less less-loader --save-dev
1
2
3
4
5
6
7
<style scoped lang="less">
.hello{
  background: yellow;
  .el-button{
    color: red
  }
}

重置样式

下面的代码可以搜索reset.css
在src/assets 下创建css文件夹,在这个文件下创建reset.css文件,粘贴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

在App.vue或者其他的组件中使用

1
2
3
4
5
6
7
8
9
10
11
<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>

安装图标库

1
2
3
4
5
6
7
8
# 安装
npm i -D font-awesome

main.js
import 'font-awesome/css/font-awesome.min.css'

# 使用
<i class="fa fa-user"></i>

安装axios

1
2
3
4
5
6
npm i axios -S

main.js
import axios from "axios";
# 挂在之后,就可以全局使用了
Vue.prototype.axios = axios

安装vue-router

1
2
# vue-router3 和 4 的配置不一样
npm install [email protected]

创建文件和文件夹
src->router->index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue'
import Router from 'vue-router'
import  Home from '../components/Home.vue'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/home',
            component:Home
        }
    ],
    mode:'history'
})

main.js
import router from './router'

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

路由懒加载和异步组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default new Router({
    routes:[
        {
            path:'/home',
            // 路由懒加载
            component:()=>import('@/components/Home.vue')
        },
        {
            path:'/home2',
						// 异步组件
            component:resolve =>require(['@/components/Home.vue'],resolve)
        }
    ],
    mode:'history'
})

setToken封装

src→utils→settoken.js

1
2
3
4
5
6
7
8
9
10
11
export function setToken(key,token){
    return localStorage.setItem(key,token)
}

export function getToken(key){
    return localStorage.getItem(key)
}

export function delToken(key){
    return localStorage.removeItem(key)
}

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
import {nameRule,passwordRule} from "@/utils/vaildate";
import {setToken} from "@/utils/setToken";

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [{validator: nameRule, trigger: 'blur'}],
        password: [{validator: passwordRule, trigger: 'blur'}],
      }
    }

  },
  methods: {
    login(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log("验证通过")
          this.axios.post("http://localhost", this.form).then(
              res => {
                console.log(res)
                if (res.data.status === 200) {
                  setToken("username", res.data.username)
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  })
                  this.$router.push('/home')
                }
              }
          )
              .catch(err => {
                console.error(err)
              })
        } else {
          console.error("验证不通过")
        }
      })
    }
  }
}
</script>

配置代理服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  lintOnSave: false,
  devServer:{
    // 运行自动打开浏览器,
    open:true,
    // 如果不配置这个,自动打开浏览器,就是0.0.0.0:8080
    host:"localhost",
    proxy:{
      '/api':{
        target:'http://127.0.0.1',
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }
      }
    }
  }
})

404

1
2
3
4
5
{
    path:'*',
    // 路由懒加载
    component:()=>import('@/components/404.vue')
}