Vue CLI
Vue cli(Command Line Interface)–
是官方提供的脚手架工具,提供搭建好的一套利用webpack管理 vue 的项目结构
首先确认安装了vue 以及 vue cli
Let’s Start!
创建脚手架项目
在命令行或编译器终端输入:
1 | vue create project_name |
两种模式
选择配置模式–默认/手动
默认模式配置较简单
若选择手动模式:
选择添加哪些配置 (按【空格】即可)
然后–
选择:是否安装 router
选择 CSS 预处理器
选择ESlint / format
选择检查配置(可全选)
- 检查后保存
- 检查到不符合规范后自动修复并提交(需要安装 git)
选择:是否将babel
、ESlint
等配置放到同一文件中
选择:是否保存以上所有选择,以便下次创建
好几个文件夹
node_models:存储相关依赖包
public:存储静态资源,放在该文件夹中的内容不会被webpack
打包,webpack
只会对其进行简单的复制粘贴整理,因此往往在其中存放永久不变的静态资源或webpack
不支持的第三方库
src:存储代码
|—-assets:存储项目自己的静态资源(图片/字体),其中内容会被webpack
处理、压缩
|—-**c*****omponents***:存储小组件,如公共组件
|—-**views**:存储大组件,如页面级、路由级组件
|—-**router**:存储 VueRouter 相关文件
|—-**store**:存储 Vuex 相关文件
|—-APP.vue:存储根组件/根实例
|—-main**_.js_:最顶层项目入口**
打包和运行
本地 server 演示:(打包到内存中)
1 | cd project-name |
如何打包到磁盘中:
1 | npm run build |
打包完毕发现目录中多了一个 dist 文件夹,存放打包好的程序
APP.vue 和 main.js
- 使用 Vue cli 开发项目,已经默认导入了 Vue.js 在 node_models 中,可以直接–在JS文件或代码段中导入 vue
1 | import Vue from 'vue' |
- web 开发一般会有一个 index.html 文件,作为根页面,但 Vue 推荐:将根页面也组件化,
在 src 文件夹下,创建App.vue,包括、
评论