1.组件化与模块化

  • 组件化:组件化是从UI界面的角度进行划分的,将页面构成分成一个个组件,方便UI组件的重用。组件包含页面构成(template)、样式(css)、功能(js)。
  • 模块化:模块化是从代码逻辑的角度进行划分,将项目按照一定的规则拆分成一个个模块,进行组合使用

模块化方便代码的分层开发,保证每个功能模块的职能单一。

模块化开发一般需要独立的开发环境,一般基于Node.js和webpack进行环境构建。

Vue模块化项目环境的搭建,可以通过官方提供的环境构建工具Vue CLI,称为Vue脚手架。

2.Vue脚手架

脚手架安装

@vue/cli是一个Vue脚手架,用来快速构建模块化项目结构。所需系统环境: node环境、npm环境。查看环境

node -v
npm -v

全局安装:(需要管理员权限)

npm install @vue/cli -g

验证安装:

vue --version

常用命令:

  • 创建项目:
vue create 项目名
或 vue ui
  • 为项目增加扩展插件:
vue add 插件

3.使用脚手架

3.1创建项目

创建一个存放项目的文件夹,在命令行窗口切换到该文件夹下。(或直接在该文件夹中使用shift+鼠标右键,选择在此文件夹打开DOM窗口。)

在命令行窗口输入命令创建Vue项目,进入交互模式。(项目名称必须2个或以上字母组成,可由短划线隔开)

vue create test-project

执行后,进入预设选择。提供了三个选项,前两个是使用默认选项,只包含基础依赖。最后一个是自定义环境,支持手动选择功能特性,自己想用什么,选择什么。

3.2环境自定义

通过键盘上下键选择第三个选项,进入环境自定义的选择。

环境特性介绍:

  • Babel:ES6语法兼容转换器,可以将ES6代码转为ES5代码,避免运行环境不支持。
  • TypeScript:TS语法支持
  • Progressive web App(PWA)Support:构建渐进式web应用,优化用
  • Router:集成路由功能
  • Vuex:集成统一数据状态管理器
  • CSS pre-processors:CSS预编译,支持使用LESS、SASS等动态样式语言
  • Linter/Formatter:代码规范检查和格式化检测
  • Unit Testing:单元测试
  • E2E Testing:端到端测试

使用键盘上下键将光标移动到要选择的行,使用空格选中(*)。

3.3进一步配置环境

如果选择了CSS Pre-processors,则需要选择动态样式语言,可以选择Sass/SCSS或Less。

如果选择Linter / Formatter,则需要选择 代码规范检查的规则。

ESLint with error prevention only # 使用ESLint,仅检测错误(ESLint是用来统一代码规范和风格的工具)
ESLint + Airbnb config # 使用 eslint+airbnb 前端规范
ESLint + Standard config # 使用标准规范
ESLint + Prettier # 使用严格规范

进一步选择代码规范检查的时机

Lint on save # 文件保存时
Lint and fix on commit # 代码整理和提交时

继续选择工具配置文件的存放位置

In dedicated config files # 存放在独立的配置文件中
In package.json # 集成在package.json文件中

此处一般选择创建独立的配置文件。

然后,继续选择是否将上述配置保存为一个预设选项,方便以后创建项目使用,选择y。并为预设创建名称:mypreset。

回车后,开始创建项目test-project。
 出现上述结果,则项目创建成功,并给出了启动项目的命令。

3.4启动项目

切换到项目的根目录,执行 npm run serve 启动开发服务器,然后根据提示url进行访问。

“npm run 命令名称”是npm内置的脚本执行命令,该命令会自动搜索执行目录下package.json文件中的’scripts’对应的命令并执行。

启动成功后,会给出访问地址,包括Local、network两种。将Local后面的网址复制粘贴到网页打开,出现下面的内容。

说点什么
欢迎骚扰,有缘人互加友链
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...