博客

1,安装nodejs

环境安装包下载： http://nodejs.cn/download/

cmd查看版本号：

node --version


2其他命令安装

cnpm安装命令:

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

cnpm -v

官网： https://www.pnpm.cn/

pnpm安装命令：

npm install -g pnpm

安装pnpm镜像

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

yarn安装命令：

npm install -g yarn

查询版本

yarn --version

安装镜像

yarn config set registry https://registry.npm.taobao.org/     

vue脚手架安装目录：

npm install -g @vue/cli
vue -V

3 创建项目

命令：

npm init vite@latest xxx
pnpm create vite@latest learning

或

vue create xxx

运行代码 先安装

npm install
npm run dev

xxx:项目名称


项目目录介绍



node_modules 模块包

public 公共资源

src 项目目录

assets 静态资源

components 组件

App.vue 根组件、

main.ts 根函数入口，全局配置生效的地方

package.json 项目配置文件，项目的标题、版本，模块的版本等信息

tsconfig.json TS配置文件

vite.config.ts Vite配置文件

4scss 安装

pnpm install sass  --save

5 element plus

官网说明 ：https://element-plus.gitee.io/zh-CN/

命令

pnpm install element-plus --save

在main.ts 配置


import ElementPlus from ‘element-plus’

import ‘element-plus/dist/index.css’

createApp(App)



.use(ElementPlus)



.mount(‘#app’)

6路由

命令

 pnpm install vue-router@next --save

新建页面

src目录下 view–>index/loginpage.vue

创建路由

src目录下新建文件夹router，文件夹新建路由文件index.ts

配置路由，写入新建的index.ts文件中



import { createRouter, createWebHistory } from ‘vue-router’

import loginpage from ‘…/view/index/LoginPage.vue’

const router = createRouter({


history: createWebHistory(),

routes: [

{ path: “/login”, component: loginpage }

]

})

export default router;

在main.ts 配置

，路径为刚创建的index.ts文件

import router from ‘./router/index’

createApp(App)

.use(ElementPlus)



.use(router)



.mount(‘#app’)

在App.vue里面加上路由标签，该标签用来装在路由视图

<router-view></router-view>

7对话框-提示框

页面引入

import { ElMessage } from 'element-plus'

使用

        ElMessage({
            type: "warning",
            message: "提示内容"
        })

8 Vuex的介绍和使用

1，介绍：https://vuex.vuejs.org/zh/



2，安装 ：pnpm install vuex@next –save



3，src目录下新建文件夹vuex，新建文件index.ts ，文件内容如下

import { createStore } from 'vuex'
import { TagModel } from '../class/TagModel'
const store = createStore({
    //状态变量
    state() {
        return {
            TagArrs: [] as TagModel[],
            Token: localStorage["token"],
            NickName: localStorage["nickname"]
        }
    },
    //方法
    mutations: {
        //添加选项卡
        AddTag(state: any, tag: TagModel) {
            if ((state.TagArrs as TagModel[]).filter(item => item.index.indexOf(tag.index) > -1).length == 0) {
                state.TagArrs.push(tag)
            }
        },
        SettingNickName(state: any, NickName) {
            state.NickName = NickName
        },
        SettingToken(state: any, Token) {
            state.Token = Token
        }
    }
})
export default store

4，main 函数里导入


import store from ‘./vuex/index’

//挂载vuex

app.use(store)

8嵌套路由

路由文件中

 routes: [
        { path: "/login", component: loginpage },
        {
            path: "/",
            component: RootPage,
            children: [
                { name: "工作台2", path: "/desktop", component: DeskTop },
                { name: "个人信息2", path: "/person", component: PersonCenter },
            ]
        }

9 echarts图表的使用

官网


https://echarts.apache.org/handbook/zh/get-started


安装

pnpm install echarts --save

10 axios的使用，读取JSON数据

安装命令

   npm install axios --save 

二、src目录下新建http文件夹，新建index.ts文件

内容示例

 import axios from 'axios';
import { ref } from 'vue'
//获取登录token
export const getToken = (name: string, password: string) => {
    return instance.get(http + "/Login/GetToken?name=" + name + "&password=" + password);
}

三、在需要使用的组件里导入http中的方法即可

示例：

import { getUserMenus } from '../../http/index'


11客户端处理跨域问题

在文件vite.config.ts中添加

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        port: 3000,
        open: true,
        proxy: {
            '/api': {
                target: 'http://localhost:5294/api',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        },
    },
    build: {
        target: ['edge90', 'chrome90', 'firefox90', 'safari15']
    }
})