美文网首页
vue-cli(vue脚手架)超详细安装教程

vue-cli(vue脚手架)超详细安装教程

作者: 鸽屿_ | 来源:发表于2020-09-28 20:10 被阅读0次

认识cli

开始安装之前,请确保你的node安装没有问题!!!

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。

安装步骤

1.安装Vue CLI 的包。

npm install -g @vue/cli

2.安装好后输入查看版本,确定是否安装成功。

vue --version 或者 vue -V

3.安装好之后,创建一个文件,在文件中执行下面代码

vue init webpack GP4  在当前文件夹生成一个名称为GP4的文件夹
执行完上面代码之后,出现交互选项,也就是自定义配置,我们进行以下设置
###模板下载好后的交互选项
1.Project name vue-demo # 项目名称,直接回车,按照括号中默认名字
(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)
2. Project description A Vue.js project # 项目描述,直接回车
3. Author # 作者名称,默认直接回车
4. Vue build standalone # 一般选择的Standalone(运行时 + 编译器)模式
    Runtime + Compiler: recommended for most users;
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) 
areONLY allowed in .vue files - render functions arerequired elsewhere
(一般都选这个Runtime + Compiler: recommended for most users)
5. Install vue-router? Yes # 是否需要 vue-router,路由,一般都需要,输入y敲回车
6.Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
7. Pick an ESLint preset Standard # 一样的ESlint 相关
8. Set up unit tests Yes # 是否安装单元测试
9. Pick a test runner 按需选择 # 测试模块
10. Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
11. Should we run `npm install` for you after the project has been created? (recommended) npm # 
包管理器,一般用NPM

4.配置完成后,可以看到目录下多出了一个项目文件夹baoge,然后cd进入这个文件夹。

我们先了解以下文件夹中各项的意义:

文件夹意义.png
src文件夹 .png

文件加载完成之后,我们在cmd中cd进入我们新创建的文件夹。

进入文件夹之后输入以下命令启动项目:

npm run dev   启动项目

执行完代码,出现以下地址,复制进入即可,如果打开浏览器之后页面不加载,可能端口号有冲突,需要修改配置文件中index.js中的port端口号。


image.png

注:dev 就是开发环境的启动命令,如果大家在安装中遇到问题,欢迎在留言区留言,我们可以一起解决。

相关文章

  • Vue.js重构有赞商城-配置

    1. 搭建脚手架 Vue-cli官方教程Vue.js安装教程 yarn global add vue-cli脚手架...

  • 使用vue-cli搭建vue项目

    vue-cli vue的脚手架 安装脚手架之前需要安装node.js 安装脚手架 安装vue-cli 创建vue项...

  • vue-cli脚手架的安装教程图解

    vue-cli脚手架模板是基于node下的npm来完成安装,这篇文章主要介绍了vue-cli脚手架的安装教程图解 ...

  • vue搭建笔记

    如何搭建安装vue环境? 请看教程 Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli) w...

  • Vue-脚手架环境安装&vue项目新增选项卡

    一、详细步骤哦~! 如何用vue官方脚手架搭建项目 1、全局安装vue脚手架 检查vue-cli的版本 如果有版本...

  • (Vue全家桶)Vue-cli

    Vue-cli Vue-cli是vue官方出品的快速构建单页应用的脚手架 安装vue-cli 安装vue-cli的...

  • Vue-cli

    vue.js 官网链接 vue-cli安装 安装vue 全局安装vue-cli(脚手架) windows: mac...

  • Vue脚手架

    一:简介Vue脚手架用于快速的生成Vue项目的基础架构安装3.x版本的脚手架 vue-cli创建项目详细[http...

  • (17.06.23)vue-cli脚手架、安装、使用、引入静态样

    vue-cli        脚手架    # 全局安装 vue-cli    $ npm install --g...

  • VUE初学

    vue-cli(vue脚手架) 1.安装vue-cli ① 使用npm(需要安装node环境)全局安装webpac...

网友评论

      本文标题:vue-cli(vue脚手架)超详细安装教程

      本文链接:https://www.haomeiwen.com/subject/uvqjuktx.html