Vuejs 脚手架介绍和框架开发入门

2020-03-16 0 By admin

Vuejs 脚手架介绍

使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。

CLI是什么意思?

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。
Vue CLI是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

一、Vue脚手架安装和使用

1.1、cnpm安装

由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:
cnpm install [name]

1.2、Vue CLI2 安装

npm install -g @vue/cli-init
初始化项目
vue init webpack my-project

  1. Project name vuelearn01 #工程的名称
  2. Project description A Vue.js project #工程的描述信息
  3. Author lyzhang #工程的开发者(描述信息)
  4. Vue build standalone #选择运行时编辑模式和运行模式
  5. Install vue-router? No #路由
  6. Use ESLint to lint your code? No #ESLint 代码检测规范
  7. Set up unit tests No #单元测试
  8. Setup e2e tests with Nightwatch? No #End to End 安装Nightwatch 是一个利用selenium或webdriver 等进行自动化测试的框架
  9. Should we run `npm install` for you after the project has been created? (recommended) npm #使用yarn 或者npm管理包。

1.3、目录结构简介

  1. build/ 和config/ webpack 相关的配置
  2. src/ 编写代码的位置
  3. node_modules 依赖的node相关的模块
  4. .babelrc ES代码相关转化配置
  5. .editorconfig 项目文本相关配置
  6. .gitignore 版本管理Git的忽略文件配置
  7. .postcssrc.js CSS相关转化配置
  8. package.js npm 的配置文件

1.4、Vue CLI3 安装

npm install -g @vue/cli
初始化项目
vue create my-project

1.5、目录结构简介

  1. public 相当于Cli2中的static目录
  2. src 代码写在这里
  3. .browserslistrc 浏览器相关配置

1.6、图像界面创建工程

也可以使用vue ui打开vuejs用于管理工程的图形界面,来创建工程。

Vusjs框架开发入门

一、Vuejs 中 el 和 template 的关系

在之前vuejs学习过程中,编写根组件的代码;我们使用的方式是html页面定义展示的框架,根组件使用el和Dom元素绑定,并提供data数据。
如果我们需要修改根组件绑定元素的展示框架或者组件新增了展示元素,就需要修改html页面的内容。这种修改html页面内容的方式,是我们不想要的。
我们可以使用template属性,来解决上面的问题。
当我们在html页面中创建了一个用于绑定的元素app;我们并不在html页面中设置其他内容。而是通过与此元素绑定Vue实例中设置template属性来定义展示的框架。

原理说明:

我们知道Vue实例中el属性用于绑定要管理的DOM,这样Vue就可以帮助解析DOM中的指令、事件监听等。如果我们在Vue实例中同时设置template元素,那么template模板的内容就会替换掉绑定的DOM中的内容。
通过在Vue实例(组件)中设置template属性方式开发,可以提高开发效率;后面可以将template、script和style 分开编写,使结构更加清晰。

二、.vue文件封装处理

一个组件以一个js对象的形式进行组织和使用的时候是非常不方便的;一方面编写template模块非常的麻烦,另外一方面如果有样式的话,我们写在哪里比较合适呢?
现在,我们以一种全新的方式来组织一个vue的组件,通过.vue文件的方式。
这种特殊的文件以及特殊的格式,必须要安装相应的loader和plugin才能处理。
npm install vue-loader vue-template-compiler --save-dev