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 }, // 关闭 eslint lintOnSave: 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. 项目开发的一般步骤
- 书写静态页面
- 拆分组件
- 获取服务器的数据进行动态展示
- 完成相应的动态业务逻辑
