使用VUE框架搭建项目基本步骤
ps:初入Vue坑的小伙伴们,对于独立做一个项目可能不清楚需要使用哪些资源,这篇随笔希望对大家有所帮助。
第一步:参照vue的官方文档,建立一个vue的项目
# 全局安装 vue-cli $ npm install --global vue-cli (如果电脑上面已有vue项目并能正常运行,基本上代表已全局安装此步,那么就可跳过此步,执行第二步,如果执行第二步的时候报第一步的错误,再执行第一步即可) # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 切换到新建文件夹 $ cd my-project # 安装node-modules模块里面的包
(我之前在这一块遇到坑(当时在node-modeles文件夹里面去执行npm install 命令,导致包一直不能正常下载,小伙伴们千万不要踩坑啦),执行npm install 一定要在node-modules文件夹外面,) npm install / cnpm install(要安装cnpm) # 运行vue项目 $ npm run dev
第二步:一般需要安装的资源(如果项目对资源版本没有要求的话,一般下载的资源都是最新的哟)
"axios": "接口请求", "babel-polyfill": "最新语法的解析", "fastclick": "移动端click", "qrcanvas-vue": "二维码", "swiper": "轮播图", "vue": "vue框架", "vue-router": "路由跳转", "vuex": "状态管理器",
ps:资源后面的文字是我自己的理解,如果有问题也请小伙伴们帮忙指正。
第三步: 部分资源需要修改或创建文件及引入
1,axios需要创建一个文件夹,对get或post请求进行封装(不允许跨域)
2,fastclick 需要在main.js里面写入此句代码
// 修复点击300ms延迟 if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', () => { FastClick.attach(document.body) }, false) }
3,swiper使用此插件需要引入swiper.min.css
4,vuex需要创建一个文件夹store,在里面建一个store.js文件,写入此句代码
import Vue from 'vue' import Vuex from 'vuex' const sessionStoragePlugin = store => { store.subscribe((mutation, state) => { Object.keys(state).forEach((item, index) => { window.sessionStorage.setItem(item, JSON.stringify(state[item])) }) }) } Vue.use(Vuex) export default new Vuex.Store({ plugins: [sessionStoragePlugin] }) 最后这个store要挂载在main.js实例里面
new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })