当前进度[========80% ]

已完成vue-cli 距离完成vueOnly the family barrels are leftvue-router,element-ui.加油！小伙子,奥里给,未来可期.
复制代码

前言

介绍: 开发大型项目,must be usedVue CLI——使用vue.js开发大型应用时,需要考虑代码目录结构,项目结构和部署、热加载、Code unit tests, etc.如果每个项目都要手动完成这些工作,That efficiency is relatively inefficient,所以通常我们会使用一些脚手架工具来帮助完成这些事情. CLI全称Command-Line Interface,Chinese translation to command line interface,俗称脚手架 Vue CLI是一个官方发布的vue.js项目脚手架 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置.

提示：以下是本篇文章正文内容,下面案例可供参考

一、Vue-CLI安装使用

1.安装Node.js

Vue-CLI其实是基于webpack开发的,因此也依赖Node. node直接百度搜 上官网,Select the corresponding version of the system to install. 查看node版本：

node --version
复制代码

二、安装Vue-CLI脚手架

1.Vue-cli3安装

直接全局安装, -g(globalGlobal global)

npm install-g @vue/cli
#This command installs yesVue-CLI3版本
复制代码

If the installation is unsuccessful,用管理员身份打开终端(命令行)执行

npm clean cache -force
npm install -g @vue/cli
复制代码

查看版本：

vue --version
复制代码

2.Vue-CLI2安装

使用Vue CLI3版本,想按照Vue CLI2The way to initialize the project does not work.

原因：Vue CLI3和旧版使用了相同的vue命令,所以Vue CLI2被覆盖了.If you want to continue using the old versionvue init功能,A bridge tool needs to be installed globally,拉取2.x模板(旧版) 具体操作如下：

npm install -g @vue/cli-init
#'vue init' 的运行效果将会跟'[email protected]'相同 
vue init webpack my-project
复制代码

2.总结：CLI3\CLI2

Direct install version3,Add a bridge tool,即可以3也可以2.

三、使用Vue-CLI2初始化项目

1.初始化

a.终端执行

vue init webpack my-project
#Press space to select and cancel during configuration
复制代码

b.Interpretation of initialization configuration options：

选项解读(部分)： ESLint选项：lint中文限制,is the code specification Author选项：Chinese author,可以改,找到Users文件夹里的Admin里的.gitconfigJust configure the file 选项解读(全)：

c.配置文件解读：

After running the initialization,Find the configuration file directlypackage.json.

     build文件夹和configFolders are configuration folders、node_modulesFolders are some dependencies,
     The directory where the code is written issrc文件夹.
     .babelrcSome configurations such as browser adaptation
     .editorconfig代码风格,如首行缩进
     .eslintignoFiles folder for code specification ignored
     .gitgnore忽略git上传的
     .eslintrc.js代码规范检测
     .postcssrc.js配置cssConversion related,不用管
     .package-lock.json和package.json有映射关系,真实版本,不用担心,了解即可,学node再深入.
复制代码

d.项目运行

#跑项目 
npm run dev 
#搭建本地服务,把项目跑起来.
复制代码

阅读代码顺序：main.js ---> index.html

2.runtime-only 和 runtime-compiler区别

a.比较二者main.js代码

区别在main.js One with registration(compiler),一个用render(only)

b.深入vue程序运行过程 比较

《runtime-compiler》    template -> ast -> render -> virtual dom -> 真实DOM
《runtime-only》                           render -> virtual dom -> 真实DOM
复制代码

结论：only性能更高,Less code and smaller files 提示：工作中用runtime-only更多

c.继续深入render函数

render:function(creatElement){
              // 1、普通用法: createElement("html标签",{标签属性},[""])
              // 举例
              // return createElement("h2",{class:'box'},{'helloworld',createElement('button',["按钮"])})

              // 2、传入组件对象
              return createElement(App)
          }
复制代码

四、使用Vue-CLI3初始化项目

vue-cli3更加简洁,无build和config目录,“0配置原则” 提供了vue ui命令,提供 可视化 配置,更加人性化 移除static文件夹(assets图片处理;staticPictures are intact),并且index.html移动到public

1.初始化

a.终端执行

vue create my-project
#vue createIt is scaffolding3
#vue init webpack是脚手架2
#Press space to select and cancel during configuration
复制代码

b.Interpretation of initialization configuration options：

The saved configuration is in Users里的Admin的.vuerc 提示的VCS是 version control system(版本控制git/svn)

c.配置文件解读：

选项解读(部分)： .brwserslistrcConfigure browser-related options,兼容性适配 .gitgnore忽略git上传的 babel.config.js不用管,关于babel README.md 解释文档（好像是markdown写的） 选项解读(全)：

d.项目运行

npm run serve
#If you don't know, you can read it directlypackage.json
复制代码

2.main.js解读

多了Vue.config.productionTip 
-->提示信息,tells you what to build
没了el,vueThere are more objects behind.$mount（'#app'）
-->结论:  el和vue({}).$mount（'#app'）等价
复制代码

五、使用vue ui配置项目

前面提到,vue-cli3提供了vue ui命令,提供 可视化 配置,更加人性化. 下面我们来学习vue ui使用：

1、启动本地服务器

启动本地服务器 vue ui,终端输入(Anywhere)

vue ui
复制代码

in the visual interface 操作 Find the working directory,导入文件夹

Install dependencies directly find the install dependencies button,Graphical operation is very simple and user-friendly.

总结

Direct global installationcli3版本,然后npmAdd a bridge tool. 跑cli2用vue init webpack project 跑cli3用vue create project cli3There is a visual operation interface,Folders are more compact runtime only比compiler好,速度更快,Code is lighter,占用更小