什么是vue-cli

一、背景介绍Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动二、知识剖析vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板三、常见问

liwenrou

610人浏览 · 2018-07-09 10:50:38

liwenrou · 2018-07-09 10:50:38 发布

一、背景介绍

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

二、知识剖析

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板

三、常见问题

如何基于vue-cli快速构建项目？

四、解决方案

①输出所有配置文件

命令行输入npm config list -l

②安装全局vue

并查看下版本，注意V要大写

③定位到项目文件夹，创建一个文件夹初始化脚手架

出来提问，回车就行了

④安装npm

⑤运行npm，更改端口

更改文件在myvue下的config。默认端口为8080，可以自由更改

记得还要装一下vue-router

在当前项目目录下输入npm install vue-router -g 即可

⑥安装完cli后，就开始更改他的一些文件，来搭建自己的路由了。

首先在App.vue中加上路由切换

 
  < 
  template 
  > 
 
 
  < 
  div  
  id= 
  "app" 
  > 
 
 
  < 
  router-link  
  to= 
  "/home" 
  >首页 
  </ 
  router-link 
  > 
 
 
  < 
  router-link  
  to= 
  "/work" 
  >职业 
  </ 
  router-link 
  > 
 
 
  < 
  router-view 
  > 
 
 
  </ 
  router-view 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  template 
  > 
 

其中router-view是用来存放子级路由的。

⑦在router文件夹中的index.js中配置好路由

 
  export  
  default  
  new  
  Router({ 
  //配置路由 
 
  routes: [ 
 
   { 
 
  path:  
  '/home', 
  //地址栏显示路径 
 
  name:  
  'Home', 
 
  component:  
  Home 
  //组件名，对应跳转组件 
 
   }, 
 
   { 
 
  path:  
  '/work', 
 
  name:  
  'Work', 
 
  component:  
  Work 
 
   }, 
 
   { 
 
  path:  
  '/work/web', 
 
  name:  
  'Web', 
 
  component:  
  Web 
 
   }, 
 
   ], 
 
  mode: 
  'history' 
 
   })

⑧在components文件夹中建立好需要的组件

 
  < 
  template 
  > 
 
 
  < 
  div  
  class= 
  "hello" 
  > 
 
 
  < 
  h2 
  >出来吧神龙！ 
  </ 
  h2 
  > 
 
 
  </ 
  div 
  > 
 
</template>

 
  < 
  template 
  >   
 
 
  < 
  ul 
  > 
 
 
  < 
  li 
  >后端 
  </ 
  li 
  > 
 
 
  < 
  router-link  
  to= 
  "/work/web" 
  >前端 
  </ 
  router-link 
  > 
 
 
  < 
  li 
  >产品 
  </ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  </ 
  template 
  > 
 

 
  < 
  template 
  > 
 
 
  < 
  h2 
  >只是一个切图仔 
  </ 
  h2 
  > 
 
 
  </ 
  template 
  > 
 

⑨还要记得在index.js中引入组件

 
  import  
  Home  
  from  
  '@/components/Home' 
  //引入组件 
 
 
  import  
  Work  
  from  
  '@/components/Work' 
 
 
  import  
  Web  
  from  
  '@/components/Web' 
 

路径要设置正确

然后一个简单的vue嵌套路由就建立起来了。

五、编码实战

见demo

五、编码实战

如上

六、拓展思考

vue全家桶如何搭配使用？

七、参考文献

基于vue-cli的快速构建

八、更多讨论

Q1:Angular Cli和vue有什么区别？

复杂性
在 API 与设计两方面上 Vue.js 都比 AngularJS 简单得多，因此你可以快速地掌握它的全部特性并投入开发。

灵活性和模块化
Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是在任何时候都必须遵循 AngularJS 制定的规则，这让 Vue 能适用于各种项目。我们知道把决定权交给你是非常必要的。
这也就是为什么我们提供 webpack template，让你可以用几分钟，去选择是否启用高级特性，比如热模块加载、linting、CSS 提取等等。

数据绑定
AngularJS 使用双向绑定，Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。

指令与组件
在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元——有自己的视图和数据逻辑。在 AngularJS 中，每件事都由指令来做，而组件只是一种特殊的指令。

运行时性能
Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。

在 AngularJS 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环 (digest cycle) 可能要运行多次。AngularJS 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

Vue 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。

有意思的是，Angular 和 Vue 用相似的设计解决了一些 AngularJS 中存在的问题。

Q2:安装淘宝npm（cnpm）

1.安装cnpm

(1)输入以下命令

npm install -g cnpm –registry=https://registry.npm.taobao.org
(2)输入cnpm -v输入是否正常，这里肯定会出错。

cnpm -v

(3)添加系统变量path的内容

　　因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。

Q3: npm run dev 后是带 #/ 如何设置把这个给隐藏呢？

设置 mode: 'history'

五、编码实战

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^