【星海出品】VUE（二）

本文主要是介绍【星海出品】VUE（二），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

版本管理器npm和yarn的区别

无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。

如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。

npm install 的时候，命令行里会不断地打印出所有被安装上的依赖。Yarn 简洁直观且直接地打印出必要的信息

为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件

项目目录简介

d\node-modules #项目依赖的第三方库
d\public

favicon.ico #浏览器小图标
index.html #单页面html文件

src #业务文件夹

assets

logo.png

App.vue #一个网页通过 import App from ‘./App.vue’ 引入
main.js #程序入口
components

HelloWorld.vue # 通过 import HelloWorld from ‘./components/HelloWorld.vue’ 引入

package.json #依赖包列表
README.md #项目说明
.gitignore #提交git忽略的配置
babel.config.js #https://www.babeljs.cn/ JS兼容 ES6-ES5
yarn.lock #项目包版本锁定和缓存地址
jsconfig.json #全局代码配置，有利于提高代码编写效率
vue.config.js #在根目录创建vue.config.js去完成webpack的一些特殊配置,默认它会被 @vue/cli-service 自动加载

如何修改端口号

项目中没有webpack.config.js文件，因为vue脚手架项目用的vue.config.js。
在src并列目录中新建vue.config.js，填入如下配置，最后重启服务器即可修改端口号

module.exports = {devServer: { // 自定义服务配置port: 3000, // 修改的端口号open: true
}

src下的
assests和components文件夹下的一切一般都会删除掉（不要默认的欢迎页面）。
src/App.vue默认有很多内容，可以全部删除留下template和script和style的框
启动进入项目目录后，使用命令 yarn serve

Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

JS中可以写一些函数，或者分享的变量
template布置排版，可以通过HTML类型的语句进行排版和引用JS的功能。

例如：<h1>{{ message }}</h1> #message是变量
<button @click=“reverseMessage”>Reverse Message</button> #reverseMessage是定义的函数
<button @click=“message += ‘!’”>Append “!”</button>

VUE进阶：