最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • vue使用全家桶搭建项目

    正文概述 掘金(harold1024)   2020-12-24   250

    使用全家桶搭建vue项目是现在既省时又省力的做法了,再配合webpack静态模块打包器,简直好用到爆炸,

    一. 全局安装脚手架vue-cli

    npm install -g vue-cli

    二. 创建一个基于webpack模板的新项目

    vue init webpack Myproject

    • Myproject是项目名称,可以根据项目需求进行改变.
    • webpack的创建可以在命令行中全程enter键,但是有个ESlint功能建议关掉,是一个代码规范原则,纵然对代码很beautify,但是严格程度已经严重影响编码速度,所以不建议使用,直接N掉就好,其实可以使用代码格式化插件在编码之后进行格式化也很实用.

    三. 在命令行进入创建好的项目

    cd Myproject

    四. 本地启功服务器,测试项目是否OK

    npm run dev

    • 在浏览器中打开命令行给出的localhost地址,例如:http://localhost:8080,当看到vue的图标,恭喜你成功了.

    五. 为了更好的项目开发,可以安装需要的插件安装包

    1. 安装element-ui(基于vue的ui库)

    npm i element-ui -s 在main.js中添加代码

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store/store'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.config.productionTip = false;
    Vue.use(ElementUI)
    
    new Vue({
    	el: '#app',
    	router,
    	store,
    	components: { App },
    	template: '<App/>'
    })
    

    2. 安装axios(vue作者推荐使用ajax与后台交互数据)

    npm install axios -s 在封装axios的api.js中添加代码

    import axios from 'axios'
    
    let base = 'http://baidu/index'
    
    export const getInfo = params => { return axios.post(`${base}/index/info`, params).then(res => res.data) }
    
    

    3. 安装vuex(基于vue的状态管理模式)

    npm install vuex -s 创建store.js, actions.js, getters.js, mutation.js文件,并在store.js文件中添加代码

    import Vue from 'vue'
    import Vuex from 'vuex'
    import * as actions from './actions'
    import * as getters from './getters'
    import * as mutations from './mutations'
    
    Vue.use(Vuex)
    
    const Store = new Vuex.Store({
    	state: {
    		localeLang: 'CN'
    	},
    	actions,
    	getters,
    	mutations,
    })
    
    export default Store
    

    关于vuex在后期会详细说明

    4. 安装Vue-router(vue的官方路由器)

    npm install vue-router 在router.js中添加代码

    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/pages/home'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Home',
          component: Home,
          meta: '首页'
        }
      ]
    })
    
    

    5. 安装sass(CSS预处理扩展语言)

    npm install node-sass --save-dev npm install sass-loader --save-dev 使用sacc中,在页面style中要添加lang属性

    <style lang="scss" scoped>
    
    </style>
    

    6. 项目目录解析

    vue使用全家桶搭建项目

    码字不易,求关注 喜欢,更多技术欢迎进入[一把伞骨]主页 1.在vue中使用session Storage和vuex保存用户登录状态 2.vue | 使用elementUi按需引入组件的方法及问题 3.vue | 判断移动端还是pc端渲染不同的页面 4.vue | router路由动态传参携带id进入详情页的三种模式 5.vue | 路由跳转回到顶部


    起源地 » vue使用全家桶搭建项目

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元