使用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/>'
})

使用VUE框架搭建项目基本步骤

猜你喜欢