VueDemo-1 脚手架Vue-cli

1.Vue-cli

 

Vue CLI

脚手架1

Vue-CLI ≠ Vue，Vue-CLI就是一个Vue工具。

1.1单文件组件

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el:'#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JS 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由JS驱动的时候，下面这些缺点将变得非常明显：

• 所有的组件都放同一个html文件中

• 没有构建步骤,不能使用npm来管理项目

• 缺乏语法高亮和提示

• 没有针对单个组件的css样式支持

针对于上述的问题，vue框架发布了 vue-cli 项目 生成 工具，Vue-cli是一个基于 Vue.js 进行快速开发的完整系统， 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

cnpm i yarn -g

安装脚手架

yarn global add @vue/cli
// cnpm i @vue/cli -g
​
vue --version   //  @vue/cli 4.5.15

1.2 快速原型开发

快速原型开发 | Vue CLI

你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展

cnpm install -g @vue/cli-service-global
yarn add @vue/cli-service-global global

可以使用快速原型开发快速测试一些demo, App.vue

<template>
  <div>
    vue的单文件组件
    <HelloWorld num = { 100 }></HelloWorld>
    <HelloWorld ></HelloWorld>
  </div>
</template>
​
<script>
import HelloWorld from './HelloWorld.vue'
export default {
  components: {
    HelloWorld
  }
}
</script>
​
<style lang="css">
  
</style>

HelloWorld.vue

<template>
  <div>
    hello world - {{ num }}
  </div>
</template>
​
<script>
export default {
  props: {
    num: {
      type: String,
      default: 10000
    }
  }
}
</script>

在App.vue的同级目录中，可以使用 vue serve App.vue 运行项目

1.3 工具安装

Vue-cli3.x以上版本需要 Node.js 8.9 或更高版本(推荐 v14以上)。

## 安装 
cnpm install -g @vue/cli 
## 安装成功后，检查  4.5.11 / 4.5.12 /4.5.13
vue --version 
vue -V 
# Vue和VueCLI是两回事 
## 卸载 
cnpm uninstall -g @vue/cli 

如果需要安装其他版本，可以使用 npm install -g @vue/cli@版本号 的方式进行指定版本。

如果最新版安装不成功，可以尝试以下4种方式去解决：

• 断网，使用热点共享流量去执行安装命令

• 安装其他版本cnpm i @vue/cli@4.5.11 -g

• 切换一下npm镜像源，切换成taobao / cnpm

• 找一个可以安装成功的小伙伴，等他创建完毕，删除掉node_modules然后传给你，保存起来(cnpm i / yarn)