【星海出品】VUE（二）-CSDN博客

版本管理器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