vue-cli
1.介绍并安装 vue-cli
1.1 什么是单页面应用程序
单页面应用程序,顾名思义,指的是一个 web 网站中只有唯一的一个 HTML 页面,所有的功能与交互都在这唯一的一个页面内完成。
1.2 什么是 vue-cli
- vue-cli 是 Vue.js 开发的标准工具。简化了程序员基于 webpack 创建工程化 vue 项目的过程。
- 程序员可以专注在撰写应用上,而不必化好几天去纠结 webpack 配置问题。
- 中文官网:Home | Vue CLI (vuejs.org)
1.3 安装
安装: 全局安装在电脑上
npm install -g @vue/cli
2. 使用 vue-cli 创建项目
2.1 基于 vue-cli 快速生成工程化的 Vue 项目:
vue create 项目名称
2.2 创建过程:
-
Please pick a preset: (Use arrow keys)
请选择一些预设,vue2 或者 vue3 的项目 -
Manually select features
手动选择要安装哪些到项目中 -
Check the features needed for your project
选择需要安装哪些功能 -
Press <space> to select
按下空格键去选择 -
Choose a version of Vue.js that you want to start the project with
选择版本 -
Pick a CSS pre-processor
选择 CSS 预处理器 -
Where do you prefer placing config for Babel, ESLint, etc.?
-
像 Babel, ESLint 这些第三方插件配置文件如何创建
-
In dedicated config files
放在独立的文件中 -
In package.json
放在 package.json 中 -
选择第一项,放在自己独立的配置文件中
-
Save this as a preset for future projects?
是否将该过程设置为预设 -
选择 y 之后 需要给预设起名字
Save preset as:
-
项目创建成功如下图所示:
-
运行提示的命令,得到项目地址,查看项目
3. 介绍项目目录结构
3.1 基本目录
-
built files will be auto injected
index.html 中的 意思为built 的文件都将被自动引入到这个区域
3.2 src 目录
assets
放置静态资源,如 CSS 文件,图片等等components
封装可复用的组件App.vue
项目的根组件main.js
项目的入口文件,打包的入口
4. 了解 vue 项目的运行流程
在工程化的项目中,vue 要做的事情很单纯:通过 main.js
把 App.vue
渲染到 index.html
的指定区域中。
-
App.vue
用来编写待渲染的模板结构 -
index.html
中预留一个 el 区域 -
main.js
把 App.vue 渲染到了 index.html 所预留的区域中 -
使用
el
属性或$mount
方法来设置预留区域没有差别 -
new Vue({ // el: '#app', // 把 render 函数指定的组件 渲染到 HTML 页面中 render: h => h(Test), }).$mount('#app')