【零基础入门VUE】VueJS - 环境设置

面向读者:所有人

所属专栏:零基础入门VUE专栏 https://blog.csdn.net/arthas777/category_12537076.html

直接在 HTML 文件中使用 <script> 标签

notranslate 复制代码
<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

访问 VueJS 的主页**https://vuejs.org/v2/guide/installation.html**并根据需要下载 vue.js。有两个版本可供使用------生产版本和开发版本。开发版本未最小化,而生产版本已最小化,如以下屏幕截图所示。开发版本将有助于项目开发过程中的警告和调试模式。

使用CDN

我们还可以开始使用 CDN 库中的 VueJS 文件。链接https://unpkg.com/vue将提供最新版本的 VueJS。VueJS 还可以在 jsDelivr ( https://cdn.jsdelivr.net/npm/vue/dist/vue.js ) 和 cdnjs ( https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/ ) 上使用vue.js)。

如果需要的话,我们可以在我们这边托管这些文件并开始 VueJS 开发。

使用 NPM

对于使用 VueJS 的大型应用程序,建议使用 npm 包安装。它配备了 Browserify 和 Webpack 以及其他必要的工具,有助于开发。以下是使用 npm 安装的命令。

notranslate 复制代码
npm  install vue

使用 CLI 命令行

VueJS 还提供 CLI 来安装 vue 并开始服务器激活。要使用 CLI 进行安装,我们需要安装 CLI,这是使用以下命令完成的。

notranslate 复制代码
npm install --global vue-cli

完成后,它会显示 VueJS 的 CLI 版本。安装需要几分钟时间。

notranslate 复制代码
+ vue-cli@2.8.2
added 965 packages in 355.414s

以下是使用 Webpack 创建项目的命令。

notranslate 复制代码
vue init webpack myproject

首先,请使用以下命令。

notranslate 复制代码
cd myproject
npm install
npm run dev

一旦我们执行 npm run dev,它就会启动服务器并提供在浏览器中显示的 url,如下图所示。

使用 CLI 的项目结构如下所示。

相关推荐
Myli_ing30 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风33 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave40 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟42 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18401 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架