[Vue项目实战]尚品汇 -- 初始化项目以及项目的配置与分析

---

文章目录

• 1. vue-cli初始化项目
• • 1.1 创建项目
  • 1.2 项目文件夹及文件说明
• 2. 项目的其他配置
• • 2.1 项目运行起来浏览器自动打开
  • 2.2 eslint 校验功能关闭
  • 2.3 配置 src 文件夹的别名
• 3. 项目开发的一般步骤

---

1. vue-cli初始化项目

在电脑中的合适位置新建存放项目文件的文件夹。

1.1 创建项目

执行命令，进入 vue-cli 创建项目：

vue create app
1

选择 vue-cli 创建 vue2 项目的默认配置创建项目：

1.2 项目文件夹及文件说明

• node_modules：项目依赖文件夹
• public：一般放置一些静态资源，放在public中的静态资源，webpack会原封不动的打包到dist文件夹中
• src：程序员源代码文件夹
  • assets：一般放置静态资源，放置多个组件共用的静态资源，放置在assets文件夹中的静态资源，webpack会把静态资源当做一个模块，打包在js文件夹中
  • components：一般放置非路由组件，或者放置全局组件
  • App.vue：项目唯一的根组件
  • main.js：程序的入口文件，整个程序中最先执行的文件
• .gitignore：git的忽略文件，与git相关
• babel.config.js：与babel相关的配置文件
• package.json：记录项目的相关信息，如：项目如何运行、项目的依赖、项目名等
• package-lock.json：缓存性文件，会记录项目依赖的来源以及版本等信息
• README.md：项目的说明性文件

2. 项目的其他配置

2.1 项目运行起来浏览器自动打开

修改 package.json 文件中的 scripts 配置项：

serve 对应的配置后面加上 --open

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

项目运行起来，自动打开浏览器，访问的为 http://0.0.0.0:8081 的解决办法：vue-cli3 运行vue项目，设置vue-cli-service serve --open自动打开浏览器，跳转到http://0.0.0.0:8081 解决办法
在 vue.config.js 文件(没有该文件在项目根目录下新建一个)中的配置中添加 devServer 配置项：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
 transpileDependencies: true,
 devServer: {
   // 开发阶段项目运行的服务器主机地址
   host: 'localhost',
   // 端口号
   port: 8081,
   https: false,
   hot: false,
   proxy: null
 }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

2.2 eslint 校验功能关闭

在 vue.config.js 文件(没有该文件在项目根目录下新建一个)中的配置中添加 lintOnSave 配置项：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // 主机地址
    host: 'localhost',
    // 端口号
    port: 8081,
    https: false,
    hot: false,
    proxy: null
  },
  // 关闭 eslint
  lintOnSave: false
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.3 配置 src 文件夹的别名

脚手架 5 版本默认进行了配置。

在 jsconfig.json 文件中配置 src 文件夹的别名 @，@ 代表的是 src 文件夹，配置后写文件路径可以直接写 @，方便路径的书写，不用频繁使用 ../ ./。

在 jsconfig.json 文件(没有该文件在项目根目录下新建一个)中进行配置：

脚手架生成的默认配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. 项目开发的一般步骤

1. 书写静态页面
2. 拆分组件
3. 获取服务器的数据进行动态展示
4. 完成相应的动态业务逻辑