如何用vue-cli创建项目

1.安装node.js

安装vue-cli之前，需要先安装node.js
判断是否安装了node.js可以打开终端，如下：

如果没有安装，可以进入node.js官网进行安装
node.js官方网址：https://nodejs.org/en
中文网：https://nodejs.p2hp.com/

2.全局安装vue-cli

首次安装vue-cli，-g表示在node全局进行安装，这样他就会安装在node内部一个指定的位置，而不是在当前的项目中，下次就可以直接使用了

$npm i @vue/cli -g

如果安装的时候报错，可以尝试一下方法
删除C:\Users**\AppData\Roaming下的npm和npm-cache文件夹
删除项目下的node_modules
删除后，重新运行以上代码即可

查看是否安装成功，如果具体显示安装版本号，说明安装成功

$vue --version

3.用vue-cli创建项目

方法一

$vue create my-vue2-project 

创建这里可能会报错，
运行后出现三个选项，分别表示：vue3版本、vue2版本和手动选择功能的，可根据自己的项目选择。

创建完成后，就会自动生成了一个项目

• dist：打包后的代码
• node_modules：项目安装的所有的包，第三方库，不需要改动
• public ： 不参与编译的资源
• src ： 需要参与编译的资源
• src下面的components：用来保存所有的自定义组件
• APP.vue：根组件
• main.js ：vue应用的一个入口文件，这里会对vue进行一个基础的配置
• babel.config.js： babel的配置文件
• vue.config.js：vue-cli的项目配置文件

方法二

ui：user interface，图形化界面的创建方式

$vue ui

4.项目结构

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

serve：打开本地的一个静态资源服务器，将项目运行起来（运行）
build：代码打包

$npm run serve

运行代码时，可能会报错，尝试一下方法
用管理员权限执行cmd
终端 输入：set-ExecutionPolicy RemoteSigned
然后再运行上面的代码即可

5.已经打包的项目如何查看呢

在终端进行server工具的安装，全局安装``

$npm i server -g

安装完成后，在终端输入一下代码，即可得到运行地址

$server dist