简单易上手的Vue项目创建

搭建环境

安装Node.js v10+

查询版本号
node -v
npm -v

安装git工具
安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装脚手架

cnpm install @vue/cli -g

创建项目

vue create 项目名称

启动项目

进入项目目录 执行 npm run serve ,启动本地开发服务器

集成路由

安装 vue-router
cnpm install vue-router -S 

在src根目录下创建 router.js 文件 

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {}
    ]
})

export default router

在main.js中进行挂载

import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

编写 router-link 的跳转链接（代码放置在APP.vue内）

<router-link to='/home' tag='span' active-class='on'>首页</router-link>

使用router-view来显示URL所匹配成功的组件

<router-view></router-view>

Vuex

安装
cnpm install vuex -S

新建src/store/index.js 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.store({

})

export default store

挂载

import store from '@/store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

sass

安装

cnpm install sass-loader -D
cnpm install sass -D

配置rem

// 作用：重置html的font-size

function resetRootFZ(){
    var oHtml = document.querySelector('html');
    var width = oHtml.getBoundingClientRect().width
    // 设置根字体的大小等于html节点的宽度的十分之一
    oHtml.style.fontSize = width/10 + 'px';
    console.log('root font size',oHtml.style.fontSize)
}
  
resetRootFZ()

// 当window窗口尺寸变化时，重新设置根字体的大小
window.addEventListener('resize',function(){
    resetRootFZ()
})

axios

安装
cnpm install axios -S

封装axios

引入ui组件库

安装
cnpm i element-ui -S