@vue-cli脚手架新建项目

@vue-cli脚手架

安装

安装脚手架：npm install -g @vue/cli ，如果已经安装vue-cli需要先删除npm uninstall vue-cli -g

创建项目

创建项目：vue create hello-world

下载依赖

//安装vue-router
npm install vue-router//安装vuex
npm install vuex// 下载element-ui
npm install element-ui-S// 下载删除node_modules的依赖
npm install rimraf-g// 全局安装rimraf// 使用 rimraf
rimraf node_modules// cmd进入文件夹位置输入指令

运行项目

cd hello-world// 进入项目
npm run serve// 运行项目

配置vue-router

import Vuefrom'vue'import VueRouterfrom'vue-router'import helloWorldfrom'../components/HelloWorld.vue'
Vue.use(VueRouter)const routes=[{
		path:'/helloWorld',
		name:'helloWorld',
		component: helloWorld}]const router=newVueRouter({
	mode:'history',
	base: process.env.BASE_URL,
	routes})exportdefault router

配置vuex

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/moduleA.js'
import moduleB from './modules/moduleB.js'
Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		// 存放状态
		count: 2,
		count1: 22,
		obj: {}
	},
	mutations: {
		// 更改state中状态的逻辑，同步操作
		increment(state, value) {
			state.count += value
		},
		getparams(state, Objects) {
			state.obj = Objects
		}
	},
	getters: {
		// state的计算属性
		newCount: state => state.count * 3
	},
	// 接到dispatch传递过来的方法和参数
	actions: {
		// 提交mutations，异步操作
		getparamsasync(context, objects) {
			// 处理异步操作
			setTimeout(() => {
				context.commit('getparams', objects)
			}, 3000)
		}
	},
	// 可以将store分成几个模块, modules、
	// 在每一个modules写state，mutations，getters，actions
	modules: {
		moduleA,
		moduleB
		// a: moduleA,
		// b: moduleB
	}
})
export default store

模块配置

export default {
	state: {
		text2: 'moduleB'
	}
}

全局引用

import Vuefrom'vue';import VueRouterfrom'vue-router'import Appfrom'./app.vue';import ElementUifrom'element-ui'import'element-ui/lib/theme-chalk/index.css';import Vuexfrom'vuex'import storefrom'./store/index.js'

Vue.use(ElementUi);
Vue.use(VueRouter);
Vue.use(Vuex);newVue({
    el:'#app',
	router: router,// 使用vuex
	store: store,
    render: h=>{returnh(App)}});