vue基础配置

vue基础配置

1. 初始化项目

vue init webpack name

2. 安装axios (请求数据配置，相当于ajax)

npm install axios --save

3. 安装sass-loader sass-node依赖包（需配置）

npm install sass-loader --save-dev
npm install node-sass --save-dev

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
   test:/\.scss$/,
   loader:['style','css','sass']
}

如果报错，可能是因为版本过高，先卸载后安装低版本。

npm uninstall sass-loader
npm install sass-loader@7.3.1 --save-dev

4. 如果开发移动端项目，需安装lib-flexible px2rem-loader(移动端屏幕适配–需配置）。

npm install lib-flexible --save
npm install px2rem-loader --save-dev

安装完成后，在main.js文件中引入lib-flexible：

import 'lib-flexible'

在build>utils.js文件中配置px2remLoader，跟配置cssLoader一样，代码如下：

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
 }//框架中已存在的
  
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
 }//自己配置的

配置好后在loaders中引入：

const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

5. 全局变量托管，安装vuex：

npm install vuex --save

安装好后，先创建store.js文件，在文件中引入vuex。
vuex 核心仓库是store（state,mutations,actions,getter,modules）。
action 提交mutation,而不是直接更改状态;
action 可以包括异步操作，mutation只能同步;
modules 将store分割成模块（modules）,每个模块拥有自己的(state,mutations,actions,getter);
store 改变状态时通过 （commit） mutations

//简单的操作下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        num:''
    },
    mutations:{
        changenum(state,newvalue){
            state.num= newvalue
        }
    }
})

创建好store.js文件后，在main.js中引入vuex与store.js文件并使用。

import Vue from 'vue'
import App from './App'
import router from './router'
//引入全局变量托管vuex
import Vuex from 'vuex'
import store from '@/store'
Vue.use(Vuex);
Vue.config.productionTip = false

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

准备工作做好后，在vue文件中改变全局变量num的值：
在onshow()或者其他方法中调用store.js中的同步变值方法改变num的值：

this.$store.commit("changenum", "123");

在vue文件中引用num的值：

console.log(this.$store.state.num)//123

6.路由拥有独立的title，安装vue-wechat-title

npm install --save vue-wechat-title

安装完成后在mian.js文件中引入“vue-wechat-title”；

import VueWechatTitle from 'vue-wechat-title'//路由跳转顶部标题
Vue.use(VueWechatTitle);
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

在路由中添加标题

{
        path: '/home/index',
        name: 'Index',
        component: Index,
        meta: {
          title: '首页'
        }
 }

7.在config>index.js中将主机地址改为‘0,0,0,0’，在同一网关中访问运行项目的主机IP地址+端口号就可以呈现项目内容啦。