共计 3507 个字符，预计需要花费 9 分钟才能阅读完成。
搭建 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, 本文到此结束。最初揭示，请看下自己的昵称