简单易上手的Vue项目创建
搭建环境**安装Node.jsv10+查询版本号node -vnpm -v安装git工具安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org安装脚手架cnpm install @vue/cli -g创建项目vue create 项目名称启动项目进入项目目录 执行 npm run serve ,启动本地开发服务器集成
·
搭建环境
安装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
更多推荐
已为社区贡献1条内容
所有评论(0)