【前端】Vue介绍及安装

最新推荐文章于 2023-09-20 21:51:15 发布

fairylym

最新推荐文章于 2023-09-20 21:51:15 发布

阅读量249

点赞数

分类专栏： vue 文章标签：后端 java excel

本文链接：https://blog.csdn.net/fairylym/article/details/109235854

版权

2 篇文章 0 订阅

订阅专栏

开始学习Vue，继续我的程序员之路。

1.Vue是什么？Vue（读音/vju/）是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。

渐进式：由浅入深的，有简单到复杂的使用Vue。

Vue.js的特点：

（1）体积小：压缩后33k;

（2）更高的运行效率：虚拟DOM，进行预处理操作；

（3）双向数据绑定：开发者不用再去操作dom对象，把精力放到业务逻辑；

（4）生态丰富、学习成本低；

2.安装

注意点：Vue不支持IE8及以下版本。Vue遵循语义化版本控制。浏览器安装 Vue Devtools ，方便审查和调试应用。

安装得方式：

（1）下载开发版本或生产版本，直接<script>引入<script src="vue.js" type="text/javascript" charset="utf-8"></script>

（2）CDN（内容分发网络），有vue.js和vue.min.js：

学习可以用<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境用<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

ES Modules用<script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js' </script>

（3）NPM：在Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件。

cmd打开命令提示符，输入以下命令：

npm install vue

（4）命令行工具（CLI）：是为单页面应用（SPA）快速搭建繁杂的脚手架。官方CLI

接下来写一下CLI最新版本安装

1）如果已经安装过旧版本，需要通过命令，将其卸载。cmd打开命令提示符，输入以下命令：

npm uninstall vue-cli -g

或者

yarn global remove vue-cli

2）安装CLI，命令如下：

npm install -g @vue/cli

或者

yarn global add @vue/cli

3）查看vue-cli版本，命令如下：

vue --version

4）升级，全局安装CLI，命令如下：

npm update -g @vue/cli

或者

yarn global upgrade --latest @vue/cli

5）创建项目，在一个文件夹下，shift + 邮件Powershell窗口，输入如下命令：

vue create my-project

或者

vue ui

6）创建项目后，运行和打包命令如下：

npm run serve

打包命令

npm run build

7）Vue-CLI版本查看命令：

vue -V

补充一些CLI低版本安装的命令：

3.0以下版本安装命令：
npm install --global vue-cli

3.0以下版本创建项目：
vue init webpack test

关注