[JavaScript知识库]带你从0到1搭建Vue项目

已安装NodeJS、vue-cli脚手架；基于Vue2

在指定目录下输入命令（创建项目）

vue create my-app

修改配置(没有就建一个) vue.config.js
详细介绍请参考官网

const { defineConfig } = require('@vue/cli-service')
const port = process.env.port || process.env.npm_config_port || 8001 // dev port
module.exports = defineConfig({
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  devServer: {
    port: port,
    open: true,
    proxy: {
      '/api/v1': {
        target: 'http://localhost:9001',
        ws: true,
        // changeOrigin: true
      },
    }
  },
})

习惯用dev启动，修改package.json（把serve改为dev）

"scripts": {
    "dev": "vue-cli-service serve",
 }

规划网站页面的大致结构（这里先建一个Home组件，即/src/pages/Home/index.vue），初始化非路由组件（如Header、Footer等）。集成vue-router，用来管理路由。详细使用可参考官网

<template>
  <div>
    Home
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

安装（或者直接vue add vue-router集成也行）
温馨提示：这时候要考虑版本兼容问题，以及之后使用vuex、less、sass等。这里我用3.x，即 yarn add module@3（module即为要安装的vuex、vue-router模块）

yarn add vue-router

编写路由配置

//src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import Home from '@/pages/Home'

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

注册路由（/src/main.js）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

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

使用router(/src/App.vue)

<template>
  <div id="app">
    <!-- Header -->
    <router-view></router-view>
    <!-- Footer -->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

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

<style>

</style>

这里把一些样式删掉，后面统一使用自定义全局styles

这时，访问http://localhost:8001/#/home，可以看到home页面了！

同样，来集成vuex

yarn add vuex@3

考虑到项目规模，所以要用vuex对数据进行管理、并创建多个目录来处理
新建store目录、index.js、modules(放小仓库、模块化开发)
/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import home from './modules/home'

Vue.use(Vuex)

const state = {}
const mutations = {}
const actions = {}
const getters = {}
const modules = {
    home
}

export default new Vuex.Store({
    state, mutations, actions, getters, modules
})

在modules下新建小仓库即：home模块/src/store/modules/home.js
`

export default {
    state: {
        data: '测试',
    },
    mutations: {
    },
    actions: {  
    },
}

这时候我们就可以在全局拿到homeData了，通过this.$store.state.home.data

以及之后通过调用store里actions，commit给mutations对数据进行修改

未完续更有问题欢迎评论或私信，一起交流，共同进步，谢谢！