设计师的个人网站,山西太原建站哪家弿,建站一条龙的服务流程是怎么样的,外加工活怎么直接找厂家接单#x1f497;#x1f497;#x1f497;欢迎来到我的博客#xff0c;你将找到有关如何使用技术解决问题的文章#xff0c;也会找到某个技术的学习路线。无论你是何种职业#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章#xff0c;也欢… 欢迎来到我的博客你将找到有关如何使用技术解决问题的文章也会找到某个技术的学习路线。无论你是何种职业我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临让我们一起踏上这个知识之旅 文章目录 下载node.js创建Vue3项目VSCode和Vue3CDN内容分发网络使用全局构建版本ES 模块构建版本启用 Import maps 下载node.js 输入下面命令查看版本
node -v下载地址https://nodejs.org/en
官方文档建议如下
创建Vue3项目
创建一个空文件夹最好路径不要有中文
之后运行 npm create vuelatest如果报错请参考【问题创建Vue项目】npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! 若成功则满足下图
项目构建完成可执行以下命令
cd test项目名
npm install
npm run dev一定要进入文件里面再下载依赖包最后启动输入网址就可以查看你的初识界面 注意服务开启过程中才能打开界面否则无法访问
运行后的界面如下
VSCode和Vue3
官方最近的IDE是VSCode 当然我们现在并没有完成一个完整的项目故不需要发布
CDN内容分发网络 这段文本是在说明如何通过 CDN 使用 Vue。CDN内容分发网络是一种网络服务它可以提供静态文件如 JavaScript、CSS、图片等的快速交付使得网站或应用程序加载速度更快。
使用全局构建版本
我们创建一个简单的HTML进行测试一下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue CDN Example/title
/head
bodydiv idapph1{{ message }}/h1button clickreverseMessageReverse Message/button
/divscript srchttps://unpkg.com/vue3/dist/vue.global.js/script
scriptconst app Vue.createApp({data() {return {message: Hello, Vue!}},methods: {reverseMessage() {this.message this.message.split().reverse().join();}}});app.mount(#app);
/script/body
/html运行结果如下 然后我们在 script标签中创建了一个 Vue 应用并定义了一个 message 数据属性和一个 reverseMessage 方法。在 HTML 中我们使用了双花括号语法 ({{}}) 来显示 message并在按钮上绑定了 reverseMessage 方法。最后我们使用 app.mount(‘#app’) 将 Vue 应用挂载到了页面上的一个 div元素中。 这样当你打开这个 HTML 文件时就会看到一个包含“Hello, Vue!”消息的标题和一个按钮。点击按钮后消息会被反转。
ES 模块构建版本 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue CDN Example with ES Modules/title
/head
bodydiv idapp{{ message }}/divscript typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.jscreateApp({data() {return {message: Hello Vue!}}}).mount(#app)
/script/body
/html启用 Import maps 启用 Import Maps 是指在浏览器中启用 Import Maps 功能。Import Maps 是一项 Web 平台的新功能它允许开发者在客户端浏览器中指定模块的导入路径和对应的 URL。这样一来开发者就不再需要在每个模块中编写完整的 URL 或相对路径而是可以在单独的配置文件中统一管理模块的导入路径提高代码的可维护性和可读性。 挑战与创造都是很痛苦的但是很充实。
