Class18 - Vue cli
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:Vue2.x从入门到实战。Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动.(来自官方介绍)
vue cli
vue cli
是vue
开发的标准工具,用于构建vue
项目.是vue开发项目的脚手架。
- 安装
1
2
3npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建项目
1
2
3vue create my-project
# OR
vue ui创建
webpack
项目1
vue init webpack projectname
加载依赖
1
vue install
启动项目
1
npm run dev
项目结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31.
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- assets // 静态资源,img,css等
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.
使用以上结构足以应对,我们一般小应用的开发,但是如果项目模块较多,可根据具体情况进行拓展,例如在src
目录下增加pages
文件夹,用于进行页面的开发。考虑到项目中这能用到通用接口、通用方法,可在src
目录下增加api
,common
等文件夹。
项目入口 main.js
1 | import Vue from 'vue' |
单页面入口 App.vue
1 | <template> |
路由文件 router/index.js
1 | import Vue from 'vue' |
vue多页应用
一般说来vue
多应用于单页应用,但是如果项目变得越来越大,一个项目由多个系统组成,这时我们可以考虑使用,vue的多页配置
推荐一篇好博客:使用Vue-cli搭建多页面应用时对项目结构和配置的调整