Vue3.0 快速搭建和手把手搭建vue +Router+vuex项目

一、Vue 3需要将Vue CLI升级到最新版本，全局安装：cmd下

npm install -g @vue/cli

二、搭建

方案一、模板快速构建,集成了router+vuex可直接开发

1.安装模板

vue create '项目名称'

2.将模板vue更新到3.0，vuex、router更新到4x

vue add vue-next

方案二、运用官网教程Vite，一步步构建vue项目

# npm 6.x
$ npm init vite@latest <你的项目名称> --template vue

# npm 7+，需要加上额外的双短横线
$ npm init vite@latest <你的项目名称> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

1、引入router4.0，关于router 3.0跟router4.0更新也是挺大的

npm install vue-router@next

如果版本不是最新则执行指令：

vue add vue-next

src目录下新建router/index.js

路由模式：

• createWebHashHistory hash 路由

• createWebHistory history 路由

• createMemoryHistory 带缓存 history 路由

js：

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const routerHistory = createWebHistory()
// createWebHashHistory hash 路由
// createWebHistory history 路由
// createMemoryHistory 带缓存 history 路由
const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      component: HelloWorld
    },
  ]
})

export default router

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

// createApp(App).mount('#app')

app.vue

<template>
  <router-view></router-view>
</template>

<script>

export default {
  name: 'App',
}
</script>

2、引入vuex 4.0

npm install vuex@next --save

如果版本不是最新则执行指令：

vue add vue-next

src目录下新建store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state: {
    userInfo: {
      name:'renkq'
    }
  },
  mutations: {
    getUserInfo (state, name) {
      state.userInfo.name = name
    }
  },
  actions: {
    asyncGetUserInfo ({ commit }) {
      setTimeout(() => {
        commit("getUserInfo", +new Date() + 'action')
      },2000)
    }
  },
  getters: {
    userInfoGetter (state) {
      return state.userInfo.name
    }
  }
})

export default store

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')


// createApp(App).mount('#app')

index.vue:

<template>
  <h1>{{ data.name }}</h1>
  <h2>{{ data.name2 }}</h2>
  <h3>{{ data.name3 }}</h3>
  <router-link to='/'> HelloWorld</router-link>
</template>

<script>
import { ref, reactive,computed  } from 'vue'
import { useStore } from "vuex";
export default {
  name: 'Index',
  setup() {
    const data = reactive({
      name: '我是vue3.0 index',
      count: 0,
      name2:computed(() => store.getters.nameGetter),
      name3:'我是谁'
    })
    const store = useStore();
    data.name3 = store.state.userInfo.name
    return {
      data
    }

  }

};
</script>

​

​

3、安装sass

1.安装style-resources-loader

vue add style-resources-loader

2.安装scss/sass   node-sass sass-loader sass

npm install node-sass sass-loader sass -D

3.检查根目录是否有vue.config.js，一般默认生成。没有的话建立文件vue.config.js

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'sass',
      patterns: []
    }
  }
}

4.引用

<style lang="scss" scoped>
$bg: #000;
$cr:yellow;
.container {
    background-color: $bg;
    color: $cr;
    width: 500px;
    height: 500px;
}
</style>

4、vue

Vue3.0生命周期	说明	Vue2.0生命周期
setup	初始化数据阶段的生命周期，相当于beforeCreate+created
onBeforeMount	组件挂载前	beforeMount
onMounted	实例挂载完毕	mounted
onBeforeUpdate	响应式数据变化前	beforeUpdate
onUpdated	响应式数据变化完成	updated
onBeforeUnmount	实例销毁前	beforeDestroy
onUnmounted	实例已销毁	destroyed
onErrorCaptured	错误数据捕捉