前言

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue通过MVVM模式,能够实现视图与模型的双向绑定。简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

Vue.js安装

Vue环境搭建一般分为两种：直接导入js文件、本地环境搭建(我的叫法)

直接导入js文件

Staticfile cdn（国内） : https://cdn.staticfile.org/vue/3.0.5/vue.global.js unpkg：https://unpkg.com/vue@next, 会保持和 npm 发布的最新的版本一致。 cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js 推荐使用unpkg，因为其更新比较快 开发环境版本 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 生产环境版本 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

本地环境搭建

分为npm搭建、cnpm搭建、vite搭建等

npm搭建（默认npm和cnpm已经安装好了）

构建大型应用使用cnpm安装，cnpm能很好地和Webpack或browserify模块打包器配合使用
cnpm install vue@next
全局安装vue-cli
cnpm install -g @vue/cli
查看版本
vue –version
在vue项目中运行
vue upgrade —next
创建项目
vue init webpack runoob-vue3-test
cd runoob-vue3-test
cnpm run dev

Vite构建Vue项目

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目，语法格式如下：

npm init @vitejs/app
cnpm init @vitejs/app runoob-vue3-test2
cd runoob-vue3-test2
cnpm install
cnpm run dev

Vue3项目打包

使用以下命令打包：

cnpm run build

执行完成后，会在 Vue 项目下会生成一个 dist
目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。

如果直接双击打开 index.html，在浏览器中页面可能是空白了，要正常显示则需要修改下 index.html 文件中 js、css 文件路径。

例如我们打开 dist/index.html 文件看到 css 和 js 文件路径是绝对路径：

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet> <script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>

我们把 js、css 文件路径修改为相对路径：

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet> <script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>

这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。

Vue3创建项目

之前用了vue inti 命令创建项目，现在使用vue create 命令创建项目以及使用vue ui 命令打开图形化的安装界面

vue create 命令

vue create testdemo
默认安装
进入项目目录
启动应用 npm run serve

vue ui 命令

vue ui 弹出项目管理界面
点击创建可以创建一个项目
输入项目名称选择包管理工具为npm 默认配置
等待安装完成

Vue3目录结构

用命令行工具vue-cli创建

Vite

目录解析

build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
–	–
node_modules	npm 加载的项目依赖模块
–	–
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：• assets: 放置一些图片，如logo等。• components: 目录里面放了一个组件文件，可以不用。• App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。• main.js: 项目的核心文件。• index.css: 样式文件。
–	–
static	静态资源目录，如图片、字体等。
–	–
public	公共资源目录。
–	–
test	初始测试目录，可删除
–	–
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
–	–
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
–	–
package.json	项目配置文件。
–	–
README.md	项目的说明文档，markdown 格式
–	–
dist	使用 npm run build 命令打包后会生成该目录。

原文链接：https://blog.csdn.net/weixin_50765000/article/details/123914839?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816780366547158%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816780366547158&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-3-123914839-null-null.nonecase&utm_term=%E6%90%AD%E5%BB%BAcdn

原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/6327