疫情又开始封校
上学期哈尔滨的疫情就没断过
这学期又得熬一学期了
不过正好让我有时间静下心来学习前端的知识 😉
Vue框架 – 环境配置
都说环境配置是新手的一道坎
只要配好环境
框架的学习其实是很简单的 😗
目录
前言
Vue.js安装
Vite构建Vue项目
Vue3项目打包
Vue3创建项目
Vue3目录结构
前言
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
