vue2脚手架搭建项目流程
使用环境: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>
启动项目 出现数字就成功了