搭建vue/cli脚手架

204 阅读1分钟

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

注意:win7最高支持node.js13.14.0版本,直接输入npm install -g @vue/cli安装的脚手架是5.0版本的,不支持,win7用户可以选择其他的版本进行安装。我这里是安装了4.5.11的版本

npm i -g @vue/cli@4.5.11

1.png

创建一个项目。vue create vuecli

选择版本 这里

2.png

3.png

创建完成后,cd 进入这个目录 然后运行命令 npm run serve

5.png

6.png

用vscode打开这个项目,结构如下:

4.png

文件作用说明

   vuecli       # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明