采用vue-cli搭建一个Vue.js项目工程

时间: 2017-10-19阅读: 1997标签: cli

Vue是目前来比较火的一个前端框架,与react和angular成三国鼎立。Vue是什么?是一套构建用户界面的渐进式框架(官网解释)

Vue两大核心思想:组件化和数据驱动,组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用,数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话)

vue-cli 的脚手架项目模板有browserify 和 webpack , 现在自己在用的是webpack , 官网给出了两个模板: webpack-simple 和 webpack 两种。两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能,普通项目基本用webpack-simple 就足够了  

安装和启动

步骤1:安装node.js

步骤2:npm安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org

步骤3:cnpm install --g vue-cli

步骤4:创建项目vue init webpack my-project

步骤5:进入项目文件cd my-project,安装依赖 cnpm install

步骤6:启动项目 npm run dev

步骤7:打包文件 npm run build 


路由(vue-router)

vue 生态系统中的路由(vue-router)是我们在做vue.js单页面应用体系必用到的机制

import VueRouter from 'vue-router'//路由
import routerConfig from './lib/routers'//路由配置

Vue.use(VueRouter)
const router = new VueRouter({routes: routerConfig})

new Vue({
  router,
  el: '#main',
  components: { App },
})

按需引入:需要实现根据不同页面加载不同js 

父子嵌套:尤其是组件存在父子关系的时候,我需要在路由里面也配置出相对应的关系结构

export default [
 {path: '/a',component:function(resolve){require(['../pages/a'],resolve);}, 
  	children: [
  		{path: '/a/b',component:function(resolve){require(['../pages/ab'],resolve);},}
  	]
    },
]


数据源(vuex)

vuex是vue生态系统中管理数据源的库!它提供了状态树(state),这里定义了全局的数据结构,数据分为2种:动态数据和静态数据,在vuex只放动态数据,把静态数据放入到vue.js的data里面。


UI组件库

在vue生态体系里面有很多专业的UI组件库,比如Element(后端)、Mint-ui(移动前端)等一些,虽然很多组件的交互大体相似,


AjAX数据获取(axios)

基本使用axios来做获取数据操作,放弃使用vue-resource,在POST请求的时候需要配合“qs”插件来做,遇到跨域场景需要服务器同时支持,axios源码里面是基于XMLHttpRequest对象来实现。


样式支持

对应css预编译Less、Sass都支持,主要需要安装对应的依赖

cnpm install less less-loader --save
cnpm install node-sass sass-loader  --save


国际化(i18n)

Vue-i18n是以插件的形式配合Vue进行工作的。通过全局的mixin的方式将插件提供的方法挂载到Vue的实例上。

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) 
    
const i18n = new VueI18n({
        locale: CONFIG.lang,    // 语言标识
        messages: {
            'zh-CN': require('./common/lang/zh'),   // 中文语言包
            'en-US': require('./common/lang/en')    // 英文语言包
        }
})
const app = new Vue({
     i18n,
     ...App
}).$mout('#root')


Angular CLI 使用教程指南参考

要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新的Angular CLI:注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持。

vue-cli3 DllPlugin 提取公用库

vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间。开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的。如果能把这些库文件提取出来,就能减少打包体积,加快编译速度。本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译。

在vue-lic脚手架中安装mockjs,实现前后端分离开发

在项目开发前期,前端开发中,页面布局基本开发完毕,但是后台还接口还没有开发完,等待后台开发完接口,在进行接口联调,浪费了等待时间,也压缩的测试的时间

改造vue-cli,使用mockjs搭建mock server

最近准备开发一款web应用,考虑到可能会有前后端并行开发的场景,所以决定使用mockjs做mock server。浏览官网文档时发现没有跑在webpack上的例子,索性自己找方法解决。当前端工程师需要独立于后端并行开发时,后端接口还没有完成,那么前端怎么获取数据?

Vue-cli 3.0配置反向代理

vue-cli 3.0版本,配置代理Proxy,在项目根目录下新建vue.config.js,它是一个可选的配置文件,新建该文件,存放在项目根目录(将自动加载)中。配置代理如下:

vue-cli3.0脚手架的使用_vue-cli3.0搭建与配置(vue.config.js)

vue-cli致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject

vue-cli e2e测试_运行 npm run e2e报错解决

vue init webpack 项目名字创建项目时,就可以选择单元测试,运行npm run e2e进行e2e单元测试了,结果发现出现很多错误,下面就总结下如何解决这些问题?

使用nodejs编写命令行工具_编写自己的cli工具

编写自己的cli工具,一行命令,3秒钟进入coding状态!看完本文,你将学会如何从零开发一个cli项目,如何上传到github库,以及如何使用npm发布自己的包。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全