一、详细步骤哦~!

如何用vue官方脚手架搭建项目

1、全局安装vue脚手架

npm install -g @vue/cli

检查vue-cli的版本

vue --version

如果有版本号则说明已经安装成功。

2、用vue-cli创建项目

vue create project_name

or

vue ui//---这里不详讲

project_name：表示你创建的项目名称。
注意：项目名称不能用大写，单词之间也不要用点拼接，路径不要有中文。

3、启动项目

    首先进入项目和目录
    cd project_name
    启动命令
    npm run serve

4、在浏览器上运行项目

在浏览器地址栏中输入：
localhost:8080

如需运行命令后自动打开浏览器，需要在package.json文件中进行配置，找到如下属性，加上“--open”：

源代码
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  }

再次运行npm run serve 即可自动打开浏览器 !

5、项目打包

npm run build

6、打包项目前需要通过vue.config.js文件来配置项目的基础路径

a：在项目根目录下创建vue.config.js文件

b：进行如下配置

    module.exports = {
        pubicPath:"./"
    }
    
    pubicPath:用于配置项目根目录，默认值

如果不配置，会找不到相应的文件渲染页面

---

二、具体安装步骤显示

注意：命名路径不能大写 不能有中文
全局安装 --- cmd 命令

image.png

安装完成：

image.png image.png image.png

在目录文件夹中创新项目vue:

image.png image.png

三、项目创建成功后，在vue中新建选项卡选项：

比如：
1.新建 .vue文件

image.png

2.注册路由

image.png
3.引用路由
image.png