Vue的项目准备

---

前言

哪里为根目录？
根目录即 于与node_modules,public,src,同级的目录

---

`提示：注意文件的位置

一、项目创建

1.创建项目

打开cmd
输入

vue create 项目名字
1

选择 框架 + 版本
vue2

vue3
任选其一就行

2.打开文件

在Vscode中，打开项目文件夹

打开终端

npm install
npm run serve
1
2

二、项目结构分析

1.node_modules

放置项目依赖的地方

2.public

一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面

3.什么是dist文件夹？

打包后的文件夹

4.src

4.1 assets

webpack打包的时候，会将静态资源assets打包成js

4.2 App.vue

唯一的根组件

4.3 main.js

入口文件【程序最先执行的文件】

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 根组件 挂载到 public 下的 index.html
new Vue({
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9

4.4 components

一般放置非路由组件（或者项目共用的组件），即 非路由组件 or 全局组件

5.babel.config.js

babel配置文件

6.package.json

看到项目描述、项目依赖、项目运行指令
像身份证一样
项目名字
版本
怎么运行
有哪些依赖

7. README.md

项目说明文件

8.package-lock.json

缓存性文件（其实是可以删掉的）

3.常见设置

3.1 浏览器自动打开 (serve 加上 --open)

在package.json文件中：

"scripts": {
 "serve": "vue-cli-service serve --open",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},
1
2
3
4
5

3.2 关闭eslint校验工具（vue.config.js）

没有vue.config.js 文件就在根目录下创建一个！！！
文件内容如下：

module.exports = {
   lintOnSave:false,
}
1
2
3

3.3 src文件夹的别名的设置（根目录下创建jsconfig.json）

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

总结

还在学习中ing…