搭建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.codethis.$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,本文到此结束。最初揭示，请看下自己的昵称