Vue框架安装入门

msmxsd

已于 2022-05-02 12:50:22 修改

阅读量2.5k

点赞数 1

分类专栏： Vue学习文章标签： JavaScript 前端框架 vue.js

于 2022-04-14 13:09:55 首次发布

本文链接：https://blog.csdn.net/qq_45943210/article/details/124141081

版权

本文介绍了Vue.js的安装方式，包括直接引入和使用CLI创建项目。详细讲述了Vue项目的初始化，包括选择配置项如Babel和Eslint。讨论了项目结构，如src目录和.vue文件的组成部分。接着演示了如何本地运行程序、修改组件以及运行Vue项目的关键步骤。

摘要由CSDN通过智能技术生成

根据MDN网站学习记录笔记

Vue.js是一款渐进式JavaScript框架。具有体积小、更高的运行效率（基于虚拟dom）、实现双向数据绑定、生态丰富、学习成本低等特点。

一、Vue.js安装

Vue.js的使用方法：

一、直接用<script>标签引入

下载vue.js将其放在项目内，用<script>标签将vue.js引入html的<head>标签内；或者是通过CDN的方式引入Vue.js。

二、使用命令行工具CLI搭建脚手架

脚手架（scaffolding）指的是创建项目时，自动完成的创建初始文件等初始化工作。往往是每次新建工程都要进行的重复性工作。

首先需要安装NPM和Node.js，然后在终端执行下列命令安装CLI

npm install --global @vue/cli

安装之后，要初始化一个新项目，可以在要创建项目的目录中打开一个终端，并运行

vue create <project-name>

CLI将会提供目配置列表。按照自己的需求，配置TypeScript,linting,vue-router,testing…

在终端进入想要创建示例的文件夹，执行vue create moz-todo-vue.
使用方向键和enter选择 “Manually select features（手动选择功能）” 选项.
选择想要包含在该项目中的功能：这里确保选中"Babel" 和 “Linter/Formatter”
为"Linter/Formatter"选择配置"Eslint with error prevention only"：辅助捕获常见的错误
选择“Lint on save”在保存文件时自动检查错误
选择配置文件的位置：“In dedicated config files” 把配置文件单独放在一个文件夹，“In package.json” 则会把配置放进package.json 里
最后是否选择把本次的选择作为将来的一个预设配置如果想把本次的配置作为一个预设配置并且以后想再次使用的话，按下 y , 否则按下 n。

在这里插入图片描述
根据创建项目时所选配置项的不同，预设目录可能存在一定区别。

.eslintrc.js: 这个是 eslint 的配置文件，可以通过它来管理校验规则。
babel.config.js: 这个是 Babel 的配置文件，可以在开发中使用 JavaScript 的新特性，并且将其转换为在生产环境中可以跨浏览器运行的旧语法代码。
.browserslistrc: 这个是 Browserslist 的配置文件，可以通过它来控制需要对哪些浏览器进行支持和优化。
public: 这个目录包含一些在 Webpack 编译过程中没有加工处理过的文件（有一个例外：index.html 会有一些处理）。

favicon.ico: 这个是项目的图标，当前就是一个 Vue 的 logo。 index.html: 这是应用的模板文件，用于管理Vue应用之外的静态HTML文件【但不是最终展示模板】，Vue 应用

关注

专栏目录