Vue开发实例（二）Vue代码运行及分析配置

本文主要是介绍Vue开发实例（二）Vue代码运行及分析配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、项目运行

上篇文件末尾介绍到，进入项目，运行启动命令，访问地址，打开项目

cd vue-test
npm run serve

接下来给大家介绍一下，每个文件夹的作用

首先需要我把用 VSCode 打开项目，目录结构如下图所示

VSCode下载地址：https://code.visualstudio.com/

二、目录结构说明

1、项目本身结构

• node_modules：项目依赖文件夹
• public：一般放置一些静态资源（图片）。需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹中。
• src（程序员源代码文件夹 ）
  • assets：一般用于存放静态资源（放置多个组件共用的静态资源），需要注意，放在assets文件夹里的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包到JS文件里面。
  • components：一般放置非路由组件（全局组件）
  • App.vue：唯一的根组件（汇总所有组件）
  • main.js：入口文件，也是整个程序当中最先执行的文件
• .gitignore：git版本管制忽略的配置（一般不碰）
• babel.config.js：babel的配置文件（相当于翻译官，比如把ES6相关语法翻译为ES5，兼容性更好，一般不碰）
• package.json：应用包配置文件（类似于项目身份证，记录着项目名称、项目依赖、项目运行等信息）
• package-lock.json：包版本控制文件（缓存性文件）
• README.md：应用描述文件（说明性文件）
• vue.config.js：可以对脚手架进行个性化定制，如何配置可以参考Vue CLI

2、其他可能用到的文件夹

• pages：存放路由相关组件（pages也可换成views）
• router：路由配置文件
• store：vuex相关文件
• mock：存放mock模拟数据

三、建议配置

1、启动服务浏览器自动打开页面地址

在package.json 中修改scripts的serve，后面加 --open 即可，也可以添加--open --host=localhost

2、关闭eslint校验工具

vue.config.js文件，添加一行代码配置，需要对外暴露

3、 src文件夹的别名的设置

注意：最新vue脚手架版本默认已经配置好了
因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些

jsconfig.json文件

{"compilerOptions": {"target": "es5","module": "esnext","baseUrl": "./","moduleResolution": "node","paths": {"@/*": ["src/*"]}"lib": ["esnext","dom","dom.iterable","scripthost"]}
}

这篇关于Vue开发实例（二）Vue代码运行及分析配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---