柚子快報(bào)激活碼778899分享：Vue3前端框架(初步)

http://yzkb.51969.com/

前期準(zhǔn)備

node安裝

node.js下載地址 選擇D盤一直next就行

環(huán)境配置

打開安裝目錄 新建兩個(gè)文件夾【node_global】和【node_cache】 管理員權(quán)限CMD

npm config set prefix "D:\node\node_global"

npm config set cache "D:\node\node_cache"

系統(tǒng)環(huán)境變量新建 變量名：NODE_PATH 變量值：D:\Node\node\node_global\node_modules

系統(tǒng)環(huán)境變量Path新建 D:\Node\node

用戶環(huán)境變量Path新建 D:\Node\node\node_global D:\Node\node\node_cache

配置鏡像

騰訊源 npm config set registry http://mirrors.cloud.tencent.com/npm/ 淘寶源已棄用(使用的話會(huì)報(bào)錯(cuò)無(wú)法安裝) npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝cnpm

npm install -g cnpm --registry=http://mirrors.cloud.tencent.com/npm/ 驗(yàn)證是否安裝成功 cnpm config get registry

安裝 vue 和腳手架

安裝 vue.js

cnpm install vue -g 驗(yàn)證安裝是否成功

安裝 webpack 模塊

cnpm install webpack -g

安裝 webpack-cli

cnpm install --global webpack-cli

安裝vue-cli 3.x

cnpm install @vue/cli –g 安裝完后的目錄

常用命令

創(chuàng)建 vue 3 項(xiàng)目

項(xiàng)目文件

管理員CMD到指定的目錄

vue create vue-demo

Element

下載的別人的項(xiàng)目不用下載–node_modules–，下載package.json后npm install

// 安裝

// -S 把安裝的文件記錄到package.json中

npm i element-ui -S

// 引入

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Axios

// 安裝

npm install axios

// 配置請(qǐng)求根路徑

axios.defaults.baseURL = 'http://localhost:8080';

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 將axios作為全局的自定義屬性，每個(gè)組件可以在內(nèi)部直接訪問(wèn)

// Vue3

// app.config.globalProperties.$http = axios

// Vue2

Vue.prototype.$http = axios;

// 請(qǐng)求 上面的模板

created: function () {

this.$http.post("/user/user_query").then((response) => {

console.log(response);

this.tableData = response.data.data;

})

}

VueRouter

// 安裝

// 4.x結(jié)合vue3使用

// 3.x結(jié)合vue2使用

npm install vue-router@3

// index.js路由跳轉(zhuǎn)

import VueRouter from "vue-router"

import Vue from "vue"

import Discover from "@/components/Discover.vue"

import Friends from "@/components/Friends.vue"

import My from "@/components/My.vue"

import Toplist from "@/components/Toplist.vue"

import Playlist from "@/components/Playlist.vue"

import Product from "@/components/Product.vue"

// 將VueRouter設(shè)置為Vue的插件

Vue.use(VueRouter)

const router = new VueRouter({

// 指定hash屬性與組件之間的對(duì)應(yīng)關(guān)系

routes: [

{ path: "/", redirect: "/discover"},

{ path: '/discover', component: Discover, children: [

{ path: "toplist", component: Toplist },

{ path: "playlist", component: Playlist }

]},

{ path: '/friends', component: Friends },

{ path: '/my', component: My, children: [

{ path: ":id", component: Product, props: true }

]}

]

})

export default router

// main.js

import router from './router'

new Vue({

render: h => h(App),

router: router

}).$mount('#app')

// 模板(其他組件代碼放后面)

Vuex

// 記得看自己的vue版本，那個(gè)視頻我看了五次才發(fā)現(xiàn)版本不對(duì)，gpt問(wèn)爛了

npm install vuex@3 --save

// 報(bào)錯(cuò)強(qiáng)制安裝

npm install vuex@3 --save --force

// store/index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

count: 0

},mutations: {

increment (state) {

state.count++

}

}

})

export default store

導(dǎo)入store

import store from './store'

new Vue({

render: h => h(App),

router: router,

store: store

}).$mount('#app')

例子

// store/index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

count: 0,

todos: [

{ id: 1, text: '吃罰單', done: true },

{ id: 1, text: '睡覺(jué)覺(jué)', done: false }

]

}, mutations: {

increment (state, n) {

state.count += n;

}

}, getters: {

doneTodos: state => {

return state.todos.filter( todo => todo.done );

}

}

})

export default store

// CountAdd.vue

模塊化

運(yùn)行

npm run serve

package.json

{

"name": "vue-demo",

"version": "0.1.0",

"private": true,

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build"

},

"dependencies": {

"axios": "^1.4.0",

"core-js": "^3.8.3",

"element-ui": "^2.15.13",

"vue": "^2.6.14"

},

"devDependencies": {

"@vue/cli-plugin-babel": "~5.0.0",

"@vue/cli-service": "~5.0.0",

"vue-template-compiler": "^2.6.14"

},

"browserslist": [

"> 1%",

"last 2 versions",

"not dead"

]

}

示例代碼

在需要請(qǐng)求的控制器前面加上@CrossOrigin注解，處理Cors跨域問(wèn)題 main.js

import Vue from 'vue'

import App from './App.vue'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import axios from 'axios'

import router from '@/router'

import store from '@/store'

Vue.config.productionTip = false

Vue.use(ElementUI)

// 配置請(qǐng)求根路徑

axios.defaults.baseURL = 'http://localhost:8080';

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 將axios作為全局的自定義屬性，每個(gè)組件可以在內(nèi)部直接訪問(wèn)

// Vue3

// app.config.globalProperties.$http = axios

// Vue2

Vue.prototype.$http = axios;

new Vue({

render: h => h(App),

router: router,

store: store

}).$mount('#app')

App.vue

router路由跳轉(zhuǎn)

import VueRouter from "vue-router"

import Vue from "vue"

import Discover from "@/components/Discover.vue"

import Friends from "@/components/Friends.vue"

import My from "@/components/My.vue"

import Toplist from "@/components/Toplist.vue"

import Playlist from "@/components/Playlist.vue"

import Product from "@/components/Product.vue"

import CountAdd from "@/components/CountAdd.vue"

// 將VueRouter設(shè)置為Vue的插件

Vue.use(VueRouter)

const router = new VueRouter({

// 指定hash屬性與組件之間的對(duì)應(yīng)關(guān)系

routes: [

{ path: "/", redirect: "/discover"},

{ path: '/discover', component: Discover, children: [

{ path: "toplist", component: Toplist },

{ path: "playlist", component: Playlist }

]},

{ path: '/friends', component: Friends, children: [

{ path: "countadd", component: CountAdd }

]},

{ path: '/my', component: My, children: [

{ path: ":id", component: Product, props: true }

]}

]

})

export default router

store

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

count: 0,

todos: [

{ id: 1, text: '吃罰單', done: true },

{ id: 1, text: '睡覺(jué)覺(jué)', done: false }

]

}, mutations: {

increment (state, n) {

state.count += n;

}

}, getters: {

doneTodos: state => {

return state.todos.filter( todo => todo.done );

}

}

})

export default store

User.vue（純表格）

Discover.vue（多層路由）

// 組件（toplist和playlist是兩個(gè)展示的組件，里面就一個(gè)h1標(biāo)簽）

My.vue和Product.vue（id路由，父向子組件props傳值，{{id}}獲?。?/p>

// My.vue

// Product.vue

// router/index.js

{ path: '/my', component: My, children: [

{ path: ":id", component: Product, props: true }

]}

CountAdd.vue

結(jié)果圖

注意事項(xiàng)

在需要請(qǐng)求的控制器前面加上@CrossOrigin注解，處理Corss跨域問(wèn)題

vue-element-admin后臺(tái)集成

V18.16.0會(huì)報(bào)錯(cuò)，降到16版本下載地址

項(xiàng)目下載地址

// 項(xiàng)目克隆鏈接

git clone https://github.com/PanJiaChen/vue-element-admin.git

// 配置（刪掉以下信息）

1.package.json中的"tui-editor": "1.3.3"

2.src/router/modoules/components.js中21行

{

path: 'markdown',

component: () => import('@/views/components-demo/markdown'),

name: 'MarkdownDemo',

meta: { title: 'Markdown' }

},

3.src\components\MarkdownEditor

4.src\views\components-demo\markdown.vue

// 安裝命令

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

// 啟動(dòng)命令

柚子快報(bào)激活碼778899分享：Vue3前端框架(初步)

http://yzkb.51969.com/

參考鏈接