Vue小项目搭建
1.Vue环境搭建与安装
1.1安装node.js环境
新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，
也可以理解为用来安装/卸载Node.js需要装的东西
node官方地址http://nodejs.cn/download/
一般window 下载64位，根据自己电脑配置选择合适的版本
下载完成后，双击“node-v14.6.0-x64.msi”文件，开始安装Node.js，无脑点击下一步安装即可
1.打开控制台【win+r】 查询是否安装成功 node -v 指令查看
2.使用npm -v 指令查看npm版本是否安装成功
3.更改npm下载的本地仓库下载镜像 执行：$ npm install -g cnpm --registry=https://registry.npm.taobao.org
4.安装vue-cli脚手架 执行：npm install -g @vue/cli 才能使用Vue指令来创建vue项目
1.2创建Vue项目
在自己的盘符下创建vue项目空文件夹。在地址栏输入cmd进入控制台。
执行 【npm create vue项目名 】创建vue项目
选择那种方式创建vvue项目 可以创建vue2和vue3的项目，还可以手动选择vue组件创建项目【这里我们选择vue2来创建项目】
创建完成用vscode打开该文件夹项目，用contorl+~ 打开终端，执行npm run serve 运行该项目，control+c
快捷键停止该项目，
1.3给浏览器安装vue调试工具
下载Devtool调试工具 点击 install the
extension 选择合适的浏览器的版本下载安装插件即可
点击使用该插件 F12 调试程序，把Vue拉到前排即可。
2.对创建的vue项目的各个组件的引入
2.1 引入vue-router
1.执行 npm install vue-router@4 4为版本，尽量选择合适的版本
2.安装完成后在package.json文件中发现该组件的依赖
3.在main中引入vue-router，并使用 Vue.use(VueRouter);
4.创建router/index.js文件
5.在main.js中引入该路由，并在Vue实例中配置该路由 router：router；
router/index.js 文件的基本格式
// 该文件专门用于创建整个应用的路由器
//引入vue-router组件
import VueRouter from 'vue-router'
//引入各个子组件
import About from '../pages/About'
import Home from '../pages/Home'
//创建并暴露一个路由器
const router = new VueRouter({
routes:[
{
name:'guanyu',//路由别名
path:'/about',//路由路径
component:About,//路由组件
meta:{title:'关于'}//路由参数
},
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children:[ //子路由 多级路由
{
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:true,title:'新闻'},
beforeEnter: (to, from, next) => { //独享路由
console.log('独享路由守卫',to,from)
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
}
},
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{isAuth:true,title:'消息'},
children:[
{
name:'xiangqing',
path:'detail',
component:Detail,
meta:{isAuth:true,title:'详情'},
//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
// props:{a:1,b:'hello'}
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
// props:true
//props的第三种写法，值为函数
props($route){
return {
id:$route.query.id,
title:$route.query.title,
a:1,
b:'hello'
}
}
}
]
}
]
}
]
})
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统'
})
export default router //暴露接口
main.js文件引入并使用vue-router 这里 Vue.config.productionTip = false //关闭无效提醒
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';//引入elemen-ui组件
import VueRouter from 'vue-router';//引入路由组件
import router from "./router" //引入创建暴露的路由
import 'element-ui/lib/theme-chalk/index.css'; //引入element-ui的css样式
//引入全局样式
import "./assets/grouble.css";
Vue.use(VueRouter) //使用路由
Vue.use(ElementUI,{size:"small"})//使用element-ui
Vue.config.productionTip = false //关闭无效提醒
new Vue({
render: h => h(App),
router:router, //在vue中配置路由
}).$mount('#app')
2.2引入element-ui组件
1.npm安装 执行 npm i element-ui -S
2.安装该模块后packgage.json中出现该依赖
3.main.js中引入该模块element-ui 和该css文件：import ‘element-ui/lib/theme-chalk/index.css’; //引入element-ui的css样式
4.Vue使用element-ui ：Vue.use(ElementUI,{size:“small”})//使用element-ui
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';//引入elemen-ui组件
import VueRouter from 'vue-router';//引入路由组件
import router from "./router" //引入创建暴露的路由
import 'element-ui/lib/theme-chalk/index.css'; //引入element-ui的css样式
//引入全局样式
import "./assets/grouble.css";
Vue.use(VueRouter) //使用路由
Vue.use(ElementUI,{size:"small"})//使用element-ui
Vue.config.productionTip = false //关闭无效提醒
new Vue({
render: h => h(App),
router:router, //在vue中配置路由
}).$mount('#app')
小提示：在vueconfig.js文件mode中加入 lintOnSave: false 配置可以关闭语法检查
vue.config.js文件
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
//关闭语法检查
lintOnSave: false
})
2.3 引入vuex
1.执行 npm install vuex --save 安装vuex。
2.创建store/index.js目录文件夹
3.在main.js文件夹中引入store/index.js的暴露的vuex接口
store/index.js文件
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions = {
/* jia(context,value){
console.log('actions中的jia被调用了')
context.commit('JIA',value)
},
jian(context,value){
console.log('actions中的jian被调用了')
context.commit('JIAN',value)
}, */
jiaOdd(context,value){
console.log('actions中的jiaOdd被调用了')
if(context.state.sum % 2){
context.commit('JIA',value)
}
},
jiaWait(context,value){
console.log('actions中的jiaWait被调用了')
setTimeout(()=>{
context.commit('JIA',value)
},500)
}
}
//准备mutations——用于操作数据（state）
const mutations = {
JIA(state,value){
console.log('mutations中的JIA被调用了')
state.sum += value
},
JIAN(state,value){
console.log('mutations中的JIAN被调用了')
state.sum -= value
}
}
//准备state——用于存储数据
const state = {
sum:0, //当前的和
school:'尚硅谷',
subject:'前端'
}
//准备getters——用于将state中的数据进行加工
const getters = {
bigSum(state){
return state.sum*10
}
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
main.js文件
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from '.ore'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store,
beforeCreate() {
Vue.prototype.$bus = this
}
})
vuex模块化
模块化结构
count.js
//求和相关的配置
export default {
namespaced:true,
actions:{
jiaOdd(context,value){
console.log('actions中的jiaOdd被调用了')
if(context.state.sum % 2){
context.commit('JIA',value)
}
},
jiaWait(context,value){
console.log('actions中的jiaWait被调用了')
setTimeout(()=>{
context.commit('JIA',value)
},500)
}
},
mutations:{
JIA(state,value){
console.log('mutations中的JIA被调用了')
state.sum += value
},
JIAN(state,value){
console.log('mutations中的JIAN被调用了')
state.sum -= value
},
},
state:{
sum:0, //当前的和
school:'尚硅谷',
subject:'前端',
},
getters:{
bigSum(state){
return state.sum*10
}
},
}
person.js
//人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
namespaced:true,
actions:{
addPersonWang(context,value){
if(value.name.indexOf('王') === 0){
context.commit('ADD_PERSON',value)
}else{
alert('添加的人必须姓王！')
}
},
addPersonServer(context){
axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
response => {
context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
},
error => {
alert(error.message)
}
)
}
},
mutations:{
ADD_PERSON(state,value){
console.log('mutations中的ADD_PERSON被调用了')
state.personList.unshift(value)
}
},
state:{
personList:[
{id:'001',name:'张三'}
]
},
getters:{
firstPersonName(state){
return state.personList[0].name
}
},
}
index.js
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)
//创建并暴露store
export default new Vuex.Store({
modules:{
countAbout:countOptions,
personAbout:personOptions
}
})
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './sore'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store,
beforeCreate() {
Vue.prototype.$bus = this
}
})```
1490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
