2020-10-17

10/19 09:53
阅读数 24

前端开发使用vue脚手架快速构建前端项目


一、使用步骤

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。

1.配置node环境

前往node官网下载并安装,地址https://nodejs.org/zh-cn/

& node -v 检测是否安装成功

2.下载安装vue官方脚手架

npm install -g @vue/cli
& vue --version 检测是否安装成功

3.通过cd命令进入你想要创建项目的文件夹

& vue init webpack 文件夹名称

运行该命令后接着出现下列选项:

  • 如果当前文件夹已存在,会提示Target directory exists. Continue? Yes
    是否在当前目录下创建

  • Project name -- vueproject
    项目名称

  • Project description -- A Vue.js project
    项目描述

  • Author (wanghong <535952925@qq.com>) wh
    作者

  • Vue build

       Runtime + Compiler: recommended for most users  --运行加编译(建议选择)

       Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere  --仅运行

  • Install vue-router? (Y/n) y
    是否安装路由

  • Use ESLint to lint your code? (Y/n) y
    是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,看个人项目需求

  • Set up unit tests (Y/n) 

       是否设置单元测试

  • Setup e2e tests with Nightwatch (Y/n) 

       是否设置端到端测试

  • Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

    Yes, use NPM (使用npm包管理)

    Yes, use Yarn (使用yarn包管理)

    No, I will handle that myself (自己处理)

4.项目初始化成功

# Project initialization finished!

cd work(进入项目所在文件夹)
& npm run dev 启动项目

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部