vue环境搭建

最新推荐文章于 2025-10-14 13:42:43 发布

原创最新推荐文章于 2025-10-14 13:42:43 发布 · 319 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

6 篇文章

订阅专栏

一般来说，我们使用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即可。

在这里插入图片描述