搭建vue我的项目
我的项目应用vue-cli开始，蕴含全家桶（vue-cli + vue3.0 + vuex + vue-router + axios +element-ui），包含自定义办法等。俗人会在本文中把具体的流程出现进去。
我把新建的我的项目放到我的库里，有须要的能够自行c
https://github.com/webwjg/newVue.git
1. 下载vue-cli
在命令窗口（shift+右键）输出：
npm install -g @vue/cli
而后稍等片刻，之后在你想要的目录地位下开始创立vue我的项目，还是在命令窗口输出：
vue create youname
youName是你本人定义的我的项目名字（不能有大写字母），之后会呈现
default是默认， Manually select features是手动设置，我抉择的是手动设置，键盘的高低键能够进行抉择，空格键是确认选中。
这是我选中的，看集体需要，之后
①. 抉择ESLint + Prettier
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier抉择ESLint + Prettier。
② . 抉择语法查看形式，
> to invert selection)
>(*) Lint on save // 保留就检测
( ) Lint and fix on commit //fix和commit保留这里抉择保留就查看。
③. 配置文件寄存地位
Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files // 独立文件搁置
In package.json //放package.json里
这里我抉择In package.json。之后就能够始终 y上来了。
给大家看下我的我的项目构造：
components是次要页面，views写子组件。
2 .配置
首先把你须要的下载下来，因为创立我的项目的时候曾经下载过vue-router和vuex了，下载只须要下载axios
npm install axios
下载胜利，刷新下package.json，中会有版本信息
留神，当你定义一个变量或者组件，然而你没有应用，会报错，咱们须要批改配置，在package.json的”rules”里增加
"vue/no-unused-components": "off",
"no-unused-vars": [
0,
{
"vars": "all",
"args": "after-used"
}
]①. vue-router
新建一个新组件，而后去router下的index.js去注册
留神，配置中path的值是自定义的，能够与引入的名字不同，然而name和component最好与引入时的命名保持一致。
路由传参
//跳转传参
this.$router.push({path:'/model', query: { page: '1', code: '6666' }});
//model组件接管
this.$route.query.code
this.$route.query.page
②. vuex
首先我的项目中的store就是vuex，在创立我的项目的时候曾经主动配好了，咱们间接用就好了。
教大家粗略的应用vuex，看个简略的保留数组吧
export default new Vuex.Store({
state: {
myarr:[],
},
mutations: {
storeArr(state,myarr){//state就是下面的state，myarr是组件传来的
state.myarr=myarr;
},
},
actions: {
},
modules: {
}
})
组件中：
storeBtn:function(){
this.$store.commit("storeArr",this.dataArr);
},这只应用了mutations，是同步的，想要异步执行就还得应用actions，
组件中：
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return {
userPhone:'19999999999',
}
},
methods:{
storePhone:function(){
this.$store.dispatch("asyncStore",this.userPhone)
},
}
}如果想获取state中的值，能够用this.$store.state.phone；
③. axios
axios默认的是application/json，如果应用这种编码方式，那么传递到后盾的将是序列化后的json字符串，咱们发送的格局也不是对象，这就很不难受。给大家看下我的笨办法，在main.js中
import axios from 'axios'
axios.defaults.transformRequest = [function (data) {
let obj = ''
for (let item in data) {
obj+= encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
}
return obj
}]
Vue.prototype.$axios=axios发送申请：
let data={a:1,b:2};
this.$axios.post('/url',data).then((res)=>{
console.log(res)
})这样就合乎我的应用习惯了。
⑤.element-ui
第一步当然是下载了
npm install element-ui
对了，卸载就是把install改为uninstall
而后去main.js引入
import ElementUI from ‘element-ui’;
Vue.use(ElementUI);
用的时候能够去官网去c代码，放在本人的我的项目中就能够了
例： <el-button @click="dialogVisible = false">取 消</el-button>
地址：https://element.eleme.cn/#/zh-CN/component/dialog
④. 自定义办法
我的是与components同级新建个文件夹（util）
util中的util.js就是写办法的中央
export default {
myutil:function(val){
console.log(val);
},
}在main.js（全局）中引入，也能够在你应用的组件中独自引入
import util from './util/util.js'
Vue.prototype.util=util;在组件中调用：
this.util.myutil(666);最初奉上一些vue中有用的小常识
1.通过ref操作子组件的事件并传值，
父组件中
<model ref='openModel' :receivedata="this.receivedata"></model>
{this.$refs.openModel.openValue(true) //办法传值,}
子组件
props: { //通过prop传的值
receivedata:Object,
},
methods:{ //通过ref传的值
openValue(val){
this.dialogVisible=val;
},
}
2.批改父组件或者根组件data的值
this.$parent.isOpen=false; //批改父组件的data
this.$root.isOpen=true; //批改根组件
3.保留vuex的state，使其刷新后不会隐没
if (sessionStorage.getItem("store")) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
window.addEventListener("pagehide",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})如果有哪些不对的中央，敬请斧正。
0k,本文到此结束。最初揭示，请看下自己的昵称
发表回复