vue 工作中的一些小总结（基础知识供刚入门的小伙伴看 vue+elementUi+vsCode+vue-router+iconfont ）

vue环境搭建

（tips:这是主要步骤哈，写的比较简略，将复杂的东西简化为3大步）
1.安装node https://nodejs.org/en/download/
2.查看npm版本 npm -v
3.安装vue-cli => npm i vue-cli -g

vue项目创建

在你搭建好vue环境后，接下来就是创建自己的项目

1.vue init webpack 项目名
2.安装依赖
3.npm run dev
4.配置sass
1 npm install node-sass --save-dev
2 npm install sass-loader --save-dev
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /.sass$/,
loaders: [‘style’, ‘css’, ‘sass’]
}
5.vs code 配置vue 模板文件 https://www.jianshu.com/p/34a5a4193892
6.重置样式
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:none; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

在main.js中引入//引入重置样式表
import ‘@/assets/css/reset.css’（自己也可以在网上搜唷）

vue集成在线iconfont 方法

1.https://www.iconfont.cn 打开网站选择自己需要的图标添加至项目
2.复制在线链接 在css 文件中 创建 iconfont.css文件
@font-face {
font-family: ‘iconfont’; /* project id 1043051 */
src: url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.eot’);
src: url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.eot?#iefix’) format(‘embedded-opentype’),
url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.woff2’) format(‘woff2’),
url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.woff’) format(‘woff’),
url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.ttf’) format(‘truetype’),
url(’//at.alicdn.com/t/font_1043051_9yqbr9w8fi7.svg#iconfont’) format(‘svg’);
}
i{
font-style: normal;
font-family: ‘iconfont’
}
.iconfont{
font-family:“iconfont” !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

3.在main.js中 引入
import ‘@/assets/css/iconfonts.css’

vue 集成elementui方法

1. npm i element-ui -S
2. 引入elementUI
   在main.js中引入elementUI
   import ElementUI from ‘element-ui’
   import ‘element-ui/lib/theme-chalk/index.css’
   Vue.use(ElementUI)

vue 实现路由跳转

1. 路由中 router下 index.js定义相关组件
   import Vue from ‘vue’
   import Router from ‘vue-router’
   import Home from ‘@/view/home/Index’
   import Find from ‘@/view/find/Find’
   import Around from ‘@/view/around/Around’
   import Aboutus from '@/view/aboutus/Aboutus’

    	Vue.use(Router)
    	
    	export default new Router({
    	  routes: [
    	    {
    	      path: '/',
    	      name: 'Home',
    	      component: Home
    	    },
    	    {
    	      path: '/Find',
    	      name: 'Find',
    	      component: Find
    	    },
    	    {
    	      path: '/Around',
    	      name: 'Around',
    	      component: Around
    	    },  
    	    {
    	      path: '/Aboutus',
    	      name: 'Aboutus',
    	      component: Aboutus
    	    }
    	  ]
    	})
   

2. 在导航组件中写逻辑
   <template>
<div class="wrapper">
<ul class="nav container">
<li :class="{'on':$route.name == 'Home'}"><router-link to="/">首页</router-link></li>
<li :class="{'on':$route.name == 'Find'}"><router-link to="find"> 发现</router-link></li>
<li :class="{'on':$route.name == 'Aboutus'}"><router-link to="Aboutus">我的</router-link></li>
<li :class="{'on':$route.name == 'Around'}"><router-link to="Around">周边</router-link></li>
</ul>
</div>
</template>

   <script>
export default { components:{},
props:{},
data(){
return { } },
watch:{},
computed:{},
methods:{},
created(){},
mounted(){}
}
</script>
<style lang="scss" scoped>
.wrapper{
.on{ background: #ff6600 }
.nav{
display: flex;
justify-content: space-around;
background: gray;
li{
width: 100%;
border:1px solid red;
text-align: center;
a{
display: inline-block;
width: 100%;
}
}
}
}
</style>

最后

由于时间关系，后续补上 vuex 、axios、等方面的个人总结，希望能和大家共同进步！！