vue个人项目实战记录
1.项目本地打开：
npm run dev ===> npm start
可以在config/index.js里把autoOpenBrowser改为true:(自动打开浏览器)
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
打包发布（线上）：
npm run build //项目打包
npm i -g serve //安装serve模块（安装过的就可以不用安装了）
serve dist //打开项目2.在项目中引用静态的components组件：
import FooterGuide from '@/components/FooterGuide/FooterGuide'加一个@符号；
3，想在项目中引用线上icon小图标，直接写：
//首先要引入css的项目库资源（添加小图标到项目购物车时要刷新link链接地址！）
//直接给标签加需要的class样式（所有icon图标必须先引入iconfont这个class！）4，安装依赖包（以swiper为例：）
npm i swiper
在***.vue中引入js和css文件；
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
//文件挂载的时候创建Swiper实例；
mounted(){
new Swiper('.swiper-container',{
loop:true,
pagination:{
el:'.swiper-pagination'
}
});
},就可以直接使用啦！
vue配置请求代理：
文件中改写：
proxyTable:{
"/api":{
target:"http://www.kuaidi100.com",//你需要请求的域名
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
然后在全局给vue构造函数添加一个方法：
Vue.prototype.HOST='/api';
这样就可以直接使用this.HOST+拼接路径直接请求数据了;
ex:
var url = this.HOST+'/query/getinfo?参数';重点：vuex!首先在store文件夹下创建index.js主文件，在该文件中配置几个参数；
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import mutations from './mutations'
import state from './state'
import actions from './actions'
Vue.use(Vuex);
export default new Vuex.Store({
getters,
state,
mutations,
actions
});还需要在Vue实例中使用该store；
//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index' //引入store->index.js
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //实例化
components: { App },
template: '首先说说state.js,该文件保存着整个项目的数据：
//state.js
export default {
name:"MR.V",
count:1
}在任何模块里都可以使用该数据：
方法有一下几种：
在computed:{}计算属性中，
//第一种
{{counts}}
{{names}}
export default {
computed: {
counts () {
return this.$store.state.count
},
names(){
return this.$store.state.name
}
}
}
//第二种
{{count}}
{{name}}
import { mapState } from 'vuex'
export default {
computed: {
...mapState (["name","count"])
}
}
//第三种
import { mapState } from 'vuex'
export default {
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}接下来说getters，相当于state的计算属性，在getters里处理state的数据，例如过滤，去重等等，在大胡子语法里写可读性较差
//我在状态属性里写了study:["55","66","77"]
filter_study:(store)=>{
var arr = store.study.filter((item)=>{
return item>=60;
});
console.log("调用啦");
return arr;
}这样就定义好了，接下来调用，在这里我为大家列出集中展示方法：
1.
import {mapState,mapGetters} from 'vuex' //首先用映射函数把getters里的filter_study引入进来
export default {
computed:{
...mapState(['study']),
...mapGetters(['filter_study'])
}
}
在页面里直接使用即可；
- {{item}}
2.
- {{item}}
接下来到Mutations了，该属性是修改state里的值，虽然可以直接不通过mutations修改
但是！但是！但是！Mutation 必须是同步函数，异步检测不到改变！，但是vuex中没有修改记录，不方便后期维护，所以，大家一起来好好学一下mutations吧；
jia(state,num){
state.count+=num;
},
jian(state,num){
state.count-=num;
},
//第一个参数是state，第二个是自定义参数，可传可不传接下来调用：
1.
methods:{
jia(a){
this.$store.commit('jia',a);
},
jian(a){
this.$store.commit('jian',a);
}
}
页面调用：
2.
可以用对象形式传递：
store.commit({
type: 'increment',
amount: 10
})
定义mutations:
jia(state,num){
state.count+=num.amount;
}
3.
用映射方法调用mutations
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')，添加方法名`
})
}
}
因为mutations管理的方法太多了，名称有点乱不方便查找，所以建立mutations-type.js 文件
该文件集中整理了方法的名字并导出，需要的直接引用即可，如下：
export const JIA = "JIA";
export const JIAN = "JIAN";
//一般用常量来保存方法名；
然后在mutations中用常量作为函数名
import {JIA,JIAN} from './mutation-types'
export default {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[JIA](state,num){
state.count+=num.amount;
},
[JIAN](state,num){
state.count-=num;
}
}
页面展示：
methods:{
jia(a){
this.$store.commit({
type:'JIA',
amount:a
});
},
jian(a){
this.$store.commit('JIAN',a);
}
}
}mutations不可以检测异步数据，所以action来了！
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
在router里，可以为router-link添加选中的样式：
//选中的router-link会自动添加一个class类，但是特别长，可以在new Router({
linkActiveClass:'active'
})；
//把该添加的类样式名改为active，router-link其实是一个a标签，直接设置a.active即可添加样式
在vue项目里如何使用stylus编译？
首先安装stylus模块，npm i stylus
然后安装stylus-loader ,npm i stylus-loader
然后在stylus里写代码即可
vue插件集合：
https://blog.csdn.net/hjh15827475896/article/details/78207066