【零基础入门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 的项目结构如下所示。

相关推荐
并不会34 分钟前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子37 分钟前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、37 分钟前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜38 分钟前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师40 分钟前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js