文章目录

• 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

选择 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"},

项目运行起来，自动打开浏览器，访问的为 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}
})

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},// 关闭 eslintlintOnSave: false
})

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"]}
}

3. 项目开发的一般步骤

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