1.Vue 安装与简单使用

    技术2022-07-11  167

    Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了。

    1.Vue的安装与简单使用

    这篇文章我们来Vue的安装与简单使用。

    Vue的使用方式呢有很多种,第一种方式就是直接使用<script>标签的方式去引入,第二种方式呢,大家可以使用Vue官方提供的CLI命令行工具,去快速的搭建比较复杂的脚手架。

    作为初学者来讲呢,强烈建议大家先不使用命令行的方式去创建Vue的应用,那当我们对这个Vue有一定的了解和学习了之后,再去使用CLI的方式去创建Vue应用。

    直接用 <script> 引入

    下载

    那在官方文档上的我们可以看到Vue为我们提供了两个版本,一个是开发版本,一个是生产版本,那顾名思义,开发的时候推荐大家使用开发版本,因为它包含完整的警告和调试信息,生产环境下推荐大家使用生产版本去替换开发时使用的开发版本,因为生产版本的话经过压缩会更小,而且删除了一些警告信息,点击开发版本或者是生产版本,我们可以下载并得到一个vue.js或vue.min.js这样的一个文件。

    然后我们创建一个index.html文件,通过 <script> 引入vue.js:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript" src="vue.js"></script> </body> </html>

    打开网页之后,并没有任何的内容,我们需要打开控制台,这时候如果我们在控制台里面可以看见两段提示,那就证明我们的vue.js已经成功地部署到项目里了。

    CDN

    CDN的本质是将媒体资源,动静态图片,HTML,CSS,JS等内容缓存到距离你更近的IDC,从而让用户进行共享资源,实现缩减站点间的响应时间等需求。

    也就是说,我们不需要把vue.js下载到本地,可以直接使用网络上的资源,省去了下载这个步骤。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- <script type="text/javascript" src="vue.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </body> </html>

    同样可以看到两段提示信息:

    对于生产环境,推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    NPM安装

    在用Vue构建大型应用时推荐使用NPM安装,它能够很好的和webpack等模块打包器配合使用。

    在使用NPM之前,我们要先安装Node.js,所谓的npm其实是Node.js的包管理工具。

    去Node.js官网上下载最新的版本,目前最新版本是12.18.2.

    下载好后,双击安装: Next: Accept,Next: 改一下安装路径,Next: Next: Next: 等待安装完成: 回车,继续,会帮助我们自动安装一些应用,比如Python。


    Node.js安装完成,我们来验证一下,打开cmd,查看node版本:

    同样可以查看NPM的安装版本:


    此时NPM的本地仓库在C盘: Node.js安装目录下两个文件夹: 执行以下两个命令:

    npm config set cache "D:\Program Files\nodejs\node_cache" npm config set prefix "D:\Program Files\nodejs\node_global"

    如果有提示,可以通过以下命令升级npm:

    npm install -g npm

    为了提升速度,需要配置一个镜像站:

    npm config set registry=http://registry.npm.taobao.org

    检查配置是否成功:

    npm config get registry

    通过NPM安装Vue:

    npm install vue -g

    安装文件在如下目录: 通过npm安装的Vue新建项目:

    vue init webpack npmVueProject

    安装完成之后,可以通过命令行直接运行项目:

    cd npmVueProject npm run dev

    打开浏览器,输入网址就可以看到Vue项目了: 项目文件:


    到此为止,我们Vue的安装与简单使用就讲完了,接下来我们就进入正式的Vue学习。

    Alex 007 认证博客专家 机器学习 NLP TensorFlow 我是 Alex 007,一个热爱计算机编程和硬件设计的小白。为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了。如果你喜欢我的文章的话,给个三连吧!
    Processed: 0.009, SQL: 9