使用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框架搭建项目基本步骤

最新文章

热门文章