vue-cli 单文件组件 工具安装

https://cli.vuejs.org/zh/

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

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

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

² 缺乏语法高亮和提示

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

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

工具安装

https://cli.vuejs.org/zh/

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

cnpm i -g @vue/cli

## 安装成功后，检查

vue --version

创建项目

# 首先需要进入到对应的目录中(英文目录不要有空格),执行如下命令

vue create 项目名称(创建时会自己以对应的项目名称生成目录)

## 例

vue create hello-world  命令行模式    vue ui 图形

在命令终端中输入命令进入

选择手动配置

选择预设置选项

选择css预处理语言

生成项目配置文件选择

不保存前端设置的配置

回车后，项目就开始通过npm进行创建和安装

注：npm最好之前，通过nrm来切换到淘宝镜像中   nrm use taobao

看到命令行中有此提示，表示创建vue项目成功

先cd到文件目录然后再

通过npm run serve启动开发项目

重要目录

src

main.js  项目入口文件

App.vue 根组件

components  自定义的功能组件

views 展示视图组件

assets 静态资源目录