Vue的脚手架使用
vue的全家桶:
vue.js
vue-router.js
vue-cli (脚手架,快速搭建vue项目)
axios
vuex.js
vue-cli的安装和使用
安装: npm i @vue/cli -g
或者: npm i "@vue/cli" -g
检测是否安装vue-cli
vue -V (注意是大V)
显示脚手架vue-cli的版本 @vue/cli 4.5.11
创建项目
vue create myapp (myapp为自定义项目名)
选择default(Babel,Eslint)
Babel: 是一个把ES6+语法转译为低版本浏览器所支持的ES语法的编译工具
ESlint: 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码
启动项目:
1. 进入目录
2. npm run serve
3. 在浏览器输入: http://localhost:8000
项目结构 :
1. README.md
2. package.json: (1)有scripts脚本 npm run serve (2)项目所需的依赖
3. package-lock.json: 锁定依赖的版本
4. babel.config.js 了解,是babel在转换es6+代码时的配置
5. .gitignore: git的忽略文件,指定的文件和目录不会提交到git仓库
6. node_modules: nodejs的包文件
7. public
(1)favicon.ico : 网站缩略图
(2)index.html: 项目中唯一的一个网页,内部有一个#app的div
8. src: 最重要的文件夹,存储项目的源代码
(1) main.js : 是整个项目的入口文件
(2) App.vue: 它是一个vue的单文件组件(只要有.vue文件,即为一个独立的组件,组件中有三个标签: template,script,style)