当前位置：首页 > news >正文

vue2脚手架搭建项目流程

news 2024/10/25 20:34:21

使用环境：node版本16.16.0

一、搭建脚手架

下载

npm install -g @vue/cli

安装好后查看版本

vue -V

在这里插入图片描述
显示版本号就是安装成功了

创建项目

vue create 项目目录

在这里插入图片描述

启动项目

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）

npm 安装

npm install element-ui -S

组件引入以及使用
完整引入
在 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 = falsenew Vue({el: '#app',render: h => h(App)
});

在这里插入图片描述

三、准备工作

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

<template><div class="index">123123456</div>
</template><script>
export default {name: 'indexHome',data() {return {}},
}
</script><style>
</style>

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

四、安装路由

npm 安装

npm install vue-router@3 -S

配置路由
在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;

main.js 配置

//引入自己定义的路由js文件
import router from "./router/index";new Vue({render: (h) => h(App),router,
}).$mount("#app");

在这里插入图片描述

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

<template><div id="app"><router-view /></div>
</template><script>
export default {name: 'App',
}
</script><style>
</style>

五、安装sass

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

在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

npm 安装

npm install vuex@3 --save

注：以下是简单的例子

在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

在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");

在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>