vue学习——vue脚手架

vue脚手架（vue cli command line interface）是Vue官方提供的标准化开发工具（开发平台）

 

安装

npm install -g @vue/cli

安装成功后，输入vue，

 

新建vue项目

vue create vue_name

 

 

cd vue_name

npm run serve  或者 yarn run serve

都可以启动项目，启动不了，看看当前所在目录是否正确

停止项目按ctrl+C。

 

vue脚手架的目录结构：

 

 .gitignore 配置上传git哪些文件忽略

babel.config.js ES6转ES5要通过babel来转，所以需要在这里进行配置

package.json 配置文件

 

 serve 是开发的时候，启动的命令，serve实际执行的是vue-cli-service serve命令

build是最后开发完，编译成浏览器可以识别的.html，.css，.js文件，然后交给后端

lint是语法检查，检查js和vue的语法，一般不用，因为vscode有比较好的语法检查，最后可能打开看下哪里语法需要修改

lock文件，包版本管理，保证再次下载包的时候还是制定的版本

src/assets 放置静态文件，图片啥的

src/components 放置程序员写的组件文件，所有的组件文件都放在这里，除了App.vue文件

public/index.html 整个应用的界面

 

 

执行了npm run serve后，首先执行的main.js文件，

main.js

 

然后看App.vue ，加载执行App.vue中引入的vue组件，然后是根据#app去index.html中找到容器

 

render函数：

引入的是残缺版的vue，缺少了模版解析器，不能解析templete。

 

这个下的vue.js才是完整的vue

 

 

 

这样写引入完整的vue，可以正确解析templa

 

 如果引用的是残缺版的vue，不能解析模版，就可以使用render函数来创建元素，render传递的是createElement函数，

这个函数可以创建元素

 

 

 

参考视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=63&spm_id_from=pageDriver