创建vue项目步骤

Vue-cli(脚手架）:

创建Vue项目步骤

1. 准备工作：安装Vue(vue3):

全局安装命令：npm install -g @vue/cli

查看安装版本，查看命令：vue --version或者vue -V

2. 创建项目命令：vue  create 项目名称

若出现此类情况，选择yes   

3. 请选择配置，上下键选择，回车确定，选择vue3配置，该配置默认带了babel和eslint两个插件

babel:专门把es6的语法转成浏览器兼容的es5支持的语法格式

eslint:用来检查语法，也可以按照一定的规则自动修复

4. 指定以后安装插件使用的命令，习惯使用npm,选择npm

5. 然后开始创建项目，默认插件选择越多，创建的速度越慢，创建成功页面

6. 项目目录解析

node_modules:第三方的库，所以运用的第三方库根目录都在这里；

package.json、package-lock.json、babel.config.js、.gitignore、README.md:为当前项目创建的配置文件

改版本：^表示改中间的位置；~表示改最后的位置

src源码目录：

App.vue:提供的默认组件

Main.js:主入口的js文件，通过该文件去加载其他很多的js文件，然后进行打包到想要的dist目录下

Assets:存放静态资源，图片，css，公共的js

Components:存放组件

public目录：静态的资源，会原封不动的给我们打包

7. 终端运行命令：

cd demo1：进入到vue项目中

npm run build：打包，运行完之后生成打包的目录，默认生成dist目录

8. 项目运行

npm run serve

通过npm run build打包后，打开dist目录，进入index.html文件，选择在浏览器中运行

手动配置创建Vue项目方式

1、2和上述步骤一样

3、选择Manually select features手动配置

4、选择以下配置，上下键选择，空格确定，和配置相关的一些选项，也可以不选，等开发项目需要时使用npm安装

5、选择Vue的版本，3.x表示3以后的版本

6、选择历史模式的路由--yes

7、一些插件选项

CSS文件预处理插件，都可选择，只是处理效率的问题，选择第一个默认选项

eslint检查语法插件，检查标准和规范不同，

当语法出现错误时，进行手动修改或者是自动修复，选择自动修复

Babel,eslint等这些配置文件是独立的配置文件，还是将这些配置加到package.json文件中，通常选后者

当前配置是否要记录下来，下次创建直接使用，可选可不选

将demo2保存为模板，下一次创建vue项目时会添加一个demo2选项

8、等待项目创建成功