Vue CLI
-
Vue脚手架(CLI)简介
—在Vue.js中开发大型应用时,需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等,如果每个项目都要手动完成这些工作,无疑于效率比较低,所以通常使用一些脚手架工具来帮助完成这些事情;
—CLI:Command - Line - Interface,命令行界面,俗称脚手架;其是官方发布的vue.js项目脚手架;使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置;
—CLI依赖Node环境和webpack,需要下载安装NodeJS,Node环境要求8.9以上或者更高版本;
—安装脚手架Vue CLI3版本的命令:
npm install -g @vue/cli
—Vue CLI3和旧版使用相同的
vue
命令,所以会将Vue CLI2覆盖,如果想要使用旧版功能,需要安装一个桥接工具:npm install -g @vue/cli-init
-
VueCLI2初始化项目过程
—node是使用C++开发的,核心为V8引擎(Chrome);
—js/java—>字节码—>浏览器,但是V8引擎直接将代码翻译成二进制代码;
—Vue CLI2创建项目:
vue init webpack my-project
;Vue CLI3创建项目:vue create my-project
如果安装错误,可以执行试一下
npm clean cache -force
,这里需要使用管理员身份运行;如果还不可以,可以去C:\Users\Sunym\AppData\Roaming\npm-cache将npm-cache删除,在进行安装;—项目目录结构解析
—ESLint规范让代码更规范,但是因为规范的问题出现很多错误;可以在项目目录下config文件夹中index.js中将useEsLint改为false关掉EsLint;
RuntimeCompiler
和RuntimeOnly
的区别—
RuntimeCompiler
在使用组件时,先在vue实例中components
里面注册,然后将注册组件放到template
;而RuntimeOnly
是在vue实例中render
中构建一个函数;—
RuntimeCompiler
Vue程序运行过程:template—>ast(抽象语法树)—>render—>vdom(虚拟DOM)—>真实DOM渲染UI;—
RuntimeOnly
Vue程序运行过程:render—>vdom(虚拟DOM)—>真实DOM渲染UI;因此其代码量更少,性能更高;—解析
render
,注意vue实例中el中的内容最终会被render中组件内容替换掉:render:function(createElement){ //1.普通用法:createElement('标签',{标签属性},['标签内容']) return createElement('h2', {class:'box'}, ['Hello World'], createElement('button',['按钮'])) //2.传入组件对象 return createElement(cpn) }
-
Vue CLI3初始项目过程
—vue-cli3是基于webpack4打造,而vue-cli2是基于webpack3;
—vue-cli3的设计原则是"0配置",移除的配置文件根目录下的build和config等目录;
—vue-cli3提供了vue ui命令,提供可视化配置,更加人性化;
—移除static文件夹,新增了public文件夹,并且index.html移动到public中;
VueCLI3配置文件的查看和修改
—像插件等安装的版本,在package.json中不一定是真实安装的版本,可以去package.json中查看id属性,另外就是去看打包以后的文件查看版本;
—(1)可以通过
vue ui
实现图形化界面的配置;—(2)VueCLI3创建项目后,并没有将配置删除,而是将其隐藏起来了;可以在创建的node_modules library root文件夹下的@vue下cil-service下会有一个webpack.config.js配置文件;然后打开该文件,会发现该文件导入的是当前文件夹下的lib文件夹下的Service.js文件,该文件也会引入其他许多配置文件;
—(3)自定义配置文件,我们可以创建一个vue.config.js文件,注意这里需要使用git命令将其提交给本地服务器
git commit
;然后再文件中配置命令的导出module.exports={}
,然后会自动将我们导出的配置与项目本身隐藏的配置进行合并作为webpack的整体配置!注意!!!vue.config.js的名称不可以改变!
更多推荐
Vue CLI基本了解
发布评论