一般来说,我们使用vue框架有两种方式:
- 简单页面,可以通过
<script>
引入CDN资源来使用 - 对于大型项目,从项目可维护性和拓展性来说,搭建本地环境来构建Vue项目是比较合适的选择
一般来说,我们通过考虑使用的场景来确定使用那种方式。如果只是简单的页面展示、需要快速拷到效果、测试某些代码片段的情况时,我们就可以直接引入CDN资源来加载Vue。对于比较长期维护和管理的一个项目,或者需要多人协助开发的一个大型项目来说,搭建一套开发环境来调试,从方便调试、方便接入 CI/CD、代码管理、代码规范检查和格式化、代码分包等角度来考虑,维护一套编译环境能减轻不少的技术债务。
直接引入CDN
Vue 框架通过模板引擎、虚拟 DOM、数据绑定和更新处理等功能,提供给开发者一种特殊的模板语法使用,归根到底所有的这些功能都是通过 Javascript 来实现的,所以从某种程度来说,我们使用 Vue 框架,也就是引入一段 Vue 框架的 JS 代码来使用。
在前端页面中引入一段 Javascript 代码片段,我们只需要通过
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
demo:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Vue直接引入Script资源</title>
<!-- 引入 CDN 资源 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
// 初始化 Vue 实例
new Vue({
el: "#app",
data() {
return {
message: "I love yq!"
};
}
});
</script>
</body>
</html>
浏览器在解析了 Vue 框架的代码并执行之后,我们通过new Vue()
启动了一个 Vue 根实例,而<div id="app"></div>
中使用双括号{{}}
绑定的message
变量也被替换成了对应的值,最终将绑定的值渲染到页面上了。
Vue Cli脚手架
脚手架在前端中也是频繁会出现的一个词,尤其近几年前端领域经历了翻天覆地的变化,前端开发页面更经常会使用到脚手架。脚手架来自于现实生活中的房屋工程,为了保证各施工过程顺利进行而搭建的的工作平台。
快速创建项目
通常来说,利用脚手架可以快速地生成示例代码、搭建本地环境,也可以更新依赖的版本等,避免了每个开发者自行调整开发环境、打包逻辑等配置。Vue cli 提供了这样的能力:对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。
Vue Cli
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。使用方式很简单:
-
安装脚手架
npm install -g @vue/cli
-
脚手架创建vue项目,同时自动安装依赖
vue create helloworld
-
接下来选择
Manually select features
来选择更多配置
-
生成后的代码目录
启动项目
在项目目录结构中,生成了README.md
文件,通过该文件可以看到项目相关的一些内容,我们可以通过该文件看到项目相关的一些内容,包括项目背景、项目启动和构建、相关负责人等说明。我们通过 Vue CLI 生成的项目 Demo 也有一个 README.md 文件。打开这个文件,我们能看到一些简单的说明
# Project setup
npm install
# Compiles and hot-reloads for development
npm run serve
# Compiles and minifies for production
npm run build
# Lints and fixes files
npm run lint
- 在这里,先用
npm install
安装依赖,在通过npm run serve
就可以运行程序啦。- 启动时报错,错误如下:
INFO Starting development server. ERROR Error: Cannot find module "vue-loader-v16/package.json"
- 执行命令
npm i --save-dev vue-loader-v16
,然后使用npm run serve
即可。
- 运行成功,出现以下页面: