vue使用全家桶搭建项目

使用全家桶搭建vue项目是现在既省时又省力的做法了,再配合webpack静态模块打包器,简直好用到爆炸,

一. 全局安装脚手架vue-cli

npm install -g vue-cli

二. 创建一个基于webpack模板的新项目

vue init webpack Myproject

• Myproject是项目名称,可以根据项目需求进行改变.
• webpack的创建可以在命令行中全程enter键,但是有个ESlint功能建议关掉,是一个代码规范原则,纵然对代码很beautify,但是严格程度已经严重影响编码速度,所以不建议使用,直接N掉就好,其实可以使用代码格式化插件在编码之后进行格式化也很实用.

三. 在命令行进入创建好的项目

cd Myproject

四. 本地启功服务器,测试项目是否OK

npm run dev

• 在浏览器中打开命令行给出的localhost地址,例如:http://localhost:8080,当看到vue的图标,恭喜你成功了.

五. 为了更好的项目开发,可以安装需要的插件安装包

1. 安装element-ui(基于vue的ui库)

npm i element-ui -s 在main.js中添加代码

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

Vue.config.productionTip = false;
Vue.use(ElementUI)

new Vue({
	el: '#app',
	router,
	store,
	components: { App },
	template: '<App/>'
})

2. 安装axios(vue作者推荐使用ajax与后台交互数据)

npm install axios -s 在封装axios的api.js中添加代码

import axios from 'axios'

let base = 'http://baidu/index'

export const getInfo = params => { return axios.post(`${base}/index/info`, params).then(res => res.data) }

3. 安装vuex(基于vue的状态管理模式)

npm install vuex -s 创建store.js, actions.js, getters.js, mutation.js文件,并在store.js文件中添加代码

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import * as mutations from './mutations'

Vue.use(Vuex)

const Store = new Vuex.Store({
	state: {
		localeLang: 'CN'
	},
	actions,
	getters,
	mutations,
})

export default Store

关于vuex在后期会详细说明

4. 安装Vue-router(vue的官方路由器)

npm install vue-router 在router.js中添加代码

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: '首页'
    }
  ]
})

5. 安装sass(CSS预处理扩展语言)

npm install node-sass --save-dev npm install sass-loader --save-dev 使用sacc中,在页面style中要添加lang属性

<style lang="scss" scoped>

</style>

6. 项目目录解析

码字不易,求关注 喜欢,更多技术欢迎进入[一把伞骨]主页 1.在vue中使用session Storage和vuex保存用户登录状态 2.vue | 使用elementUi按需引入组件的方法及问题 3.vue | 判断移动端还是pc端渲染不同的页面 4.vue | router路由动态传参携带id进入详情页的三种模式 5.vue | 路由跳转回到顶部