vue2脚手架搭建项目流程

使用环境：node版本16.16.0

一、搭建脚手架

1. 下载

npm install -g @vue/cli

2. 安装好后 查看版本

vue -V

显示版本号就是安装成功了

3. 创建项目

vue create 项目目录

4. 启动项目

cd 当前的项目名称（进去项目名称文件夹下）
npm run serve

这样就是启动成功了

访问地址后展示这个页面就对了

5. 关闭Eslint（在vue.config.js里面添加 ）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false  //添加该行代码
})

二、element-ui组件安装（安装的版本是2.15.14）

1. npm 安装

npm install element-ui -S

2. 组件引入以及使用
   完整引入
   在 main.js 中写入以下内容：(直接粘贴进main.js)

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
});

三、准备工作

1. 在src下创建一个views文件夹,创建index.vue

<template>
    <div class="index">
        123123456
    </div>
</template>

<script>
export default {
    name: 'indexHome',
    data() {
        return {}
    },
}
</script>

<style>
</style>

2. 删除src下的components文件夹下的HelloWorld.vue

四、安装路由

1. npm 安装

npm install vue-router@3 -S

2. 配置路由
   在src下创建一个router文件夹,创建index.js

import Vue from "vue"; //引入Vue对象，因为要用它的use
import Router from "vue-router"; //引入vue-router
//使用路由插件
Vue.use(Router);

//配置路由
const routes = [
  {
    path: "/",
    name: "index",
    component: () => import("@/views/index"),
  },
];

const router = new Router({
  mode: "history", // hash/history
  //插件路由对象
  routes,
});

export default router;

3. main.js 配置

//引入自己定义的路由js文件
import router from "./router/index";

new Vue({
  render: (h) => h(App),
  router,
}).$mount("#app");

4. 在App.vue直接替换下面代码

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

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

<style>
</style>

五、安装sass

1. npm 安装

npm install node-sass@9.0.0 --save-dev
npm install sass-loader@6.0.6 --save-dev
npm install style-loader@4.0.0 --save-dev

2. 在src下创建一个views文件夹的index.vue替换成以下代码看看是否生效

<template>
    <div class="index">
        <span class="index_span">123123456</span>
    </div>
</template>

<script>
export default {
    name: 'indexHome',
    data() {
        return {}
    },
}
</script>

<!-- 在需要用到sass的地方添加lang="scss" -->
<style lang="scss" scoped>
.index{
    width: 100px;
    height: 100px;
    background: red;
    .index_span{
        color: #ffffff;
    }
}
</style>

六、安装vuex

1. npm 安装

npm install vuex@3 --save

注：以下是简单的例子

2. 在src下创建一个store文件夹的index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
  count: 100,
};

const store = new Vuex.Store({
  state
})

export default store

3. 在main.js里面引入

import store from "./store";
new Vue({
  render: (h) => h(App),
  store, //把store对象植入到vue的根属性，在vue组件里就可以使用 this.$store拿到vueX.store对象
}).$mount("#app");

如图：

或者直接复制下面代码替换

import Vue from "vue";
import App from "./App.vue";
// 引入element
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
//引入自己定义的路由js文件
import router from "./router/index";
import store from "./store";

Vue.config.productionTip = false;

// 全局组件挂载
Vue.use(ElementUI);

new Vue({
  render: (h) => h(App),
  store, //把store对象植入到vue的根属性，在vue组件里就可以使用 this.$store拿到vueX.store对象
  router,
}).$mount("#app");

4. 在src下创建一个views文件夹的index.vue 添加代码

<template>
    <div class="index">
        <span class="index_span">123123456</span>
        <!-- 这里是新的 -->
        {{ text }}
    </div>
</template>

<script>
export default {
    name: 'indexHome',
    data() {
        return {
            text: '', // 这里是新的
        }
    },
    created() {
        this.text = this.$store.state.count // 添加获取store定义的count
    },
}
</script>

<!-- 在需要用到sass的地方添加lang="scss" -->
<style lang="scss" scoped>
.index {
    width: 100px;
    height: 100px;
    background: red;
    .index_span {
        color: #ffffff;
    }
}
</style>

启动项目 出现数字就成功了