Vue工程化

Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；

  • 基于 webpack 构建，并带有合理的默认配置；

  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。

---

就是单文件组件

IE8以上才能用.node8.9以上才能使用

vue-cli 3.x 它还没有在工程化中集成 vue3.0安装选项   dart-sass  / node-sass

vue-cli 4.3之后 在vue-cli中就集成了 vue3.x安装选项

---

安装

npm i -g @vue/cli

## 安装成功后，检查

vue --version

创建

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

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

## 例    // vue create hello-world

 

 

 

 

 

 

 带eslint的配置(没那么重要,就是 Linter)

vscode插件ESLint下载

 其实工作中用不到创建项目,都使用老项目配置文件直接npm i 就好了

---

或 vue ui 创建项目

点创建，选目录，点+创建，写名字，选npm，选手动，css选中，linter取消，点第一个dart-sass，不保存预设。

他比命令行创建要慢。

---

运行命令: npm run serve

---

项目目录

src        

        main.js  项目入口文件

        App.vue 根组件

        components  自定义的功能组件

        views 展示视图组件

        assets 静态资源目录

---