vue项目初始化过程。

image

image

image

image

  1. main.js

:Vue.config.productionTip=false;可要可不要。
(关闭生产提示,我们一般在开发中,所以暂时用不到,它就是多了一个小提示。
开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。(摘于官网说明)

大概意思应该就是,消息提示的环境配置,设置为开发环境或者生产环境)

image

image

image

1: vue -cli 脚手架初始化项目
node+ webpack +淘宝镜像

node_modules文件夹:项目依赖文件夹

public 文件夹: 一般放置一些静态资源(图片) ,需要注意,放在public 文件夹中的静态资源,webpack进行打包的时候,会原封不动打包到dist文件夹中.

src文件夹(程序员源代码文件夹):
assets文件夹:一般也是放置静态资源(一般放置多个组件公用的静态资源),需要注意,放置在assets文件夹里面静态资源,在webpack打包的时候, webpack会把静态资源当做一个模块,打包JS文件里面。

components文件夹: 一般放置的是非路由组件(全局组件 )

App.vue:唯一的根组件,Vue当中的组件(.vue)
main.js:程序入口文件,也是整个程序当作最先执行的文件。

babel.config.js:配置文件(babel相关,把es6的一些语法转换为es5的语法兼容性更高)

package.json 文件: 认为是项目‘身份证’,记录项目叫做什么、项目当中有哪些依赖、项目怎么运行。

package-lock.json:缓存性文件(把我们的依赖的版本号那些记录下来,下次删除了package.json,重新下载的话速度会快很多。)

READEM.md:说明性文件。

2: 项目的其他配置

2.1 项目运行起来的时候,让浏览器自动打开
(找到package.json文件夹中的“scripts” serve那➕ 一个空格--open即可)
--package.json
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},

2.2eslint校验功能关闭。(es6语法中的一些好像是严格模式,比如我定义了没有使用它会报错,关闭它更好)
在根目录下---也就是babel.config.js,的同等级。
创建一个vue.config.js
比如:声明变量但是没有使用,eslint校验工具报错。
module.exports = {
//关闭eslint
lintOnSave:false,
}

2.3src文件夹简写方法,配置别名。

jsconfig.json配置别名@提示【@代表的是src文件夹,这样将来文件夹过多,找的时候方便很多】
node_modules和dist不可以用。
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/": [
"src/
"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}

具体安装可参考该链接:

https://www.jianshu.com/p/a19f76299463

posted @ 2022-03-05 10:59  LuDuo  阅读(667)  评论(0编辑  收藏  举报