美文网首页
vue完整项目的搭建

vue完整项目的搭建

作者: 遇见sh | 来源:发表于2020-10-15 16:34 被阅读0次

一、安装node环境

1、下载地址为:https://nodejs.org/en/

2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功


图片1.png

3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/
输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

图片2.png

检查是否安装成功:


图片3.png

二、搭建vue项目环境

1、全局安装vue-cli

npm install --global vue-cli

图片4.png

2、进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名


图片5.png

说明:

Vue build ==> 打包方式,回车即可;

Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;

3、进入项目:cd vue-demo,安装依赖


图片6.png

安装成功后,项目文件夹中会多出一个目录: node_modules

图片7.png

4、npm run dev,启动项目

项目启动成功:

图片8.png

相关文章

  • vue2.0 之关于组件之间如何通信

    最近在学习用vue2.0进行项目的开发,由于接手项目的时候,项目的完整架构已经搭建完毕,为了不破坏之前的项...

  • 【Vue】教程:三、Vue Cli3项目结构优化

    前提 完成vue cli3项目的新建,可参考教程【Vue】windows下vue cli3安装及搭建项目详解 一、...

  • vue完整项目的搭建

    一、安装node环境 1、下载地址为:https://nodejs.org/en/[https://nodejs....

  • vue2.0之兄弟组件通信及路由

    最近在学习用vue2.0进行项目的开发,由于接手项目的时候,项目的完整架构已经搭建完毕,为了不破坏之前的项目,我就...

  • VUE学习之路一 项目搭建

    脚手架搭建vue项目框架 CLI3项目搭建查看 搭建方案 vue-cli 是一个官方发布 vue.js 项目脚手...

  • 一张图教你快速玩转vue-cli3

    前言 本文系统的梳理了vue-cli3搭建项目的常见用法,目的在于让你快速掌握独立搭建vue项目的能力。你将会了解...

  • Vue一:Vue项目的搭建

    Vue项目的环境搭建 vue项目的搭建需要node.js环境,需要安装点击这里进入node.下载。傻瓜式安装即可;...

  • vue2.0+router路由

    1、搭建vue脚手架2、通过vue脚手架,我们搭建好了基础的vue,接下来就开始使用vue-cli来构建基础路由项...

  • Vue CLI

    一、简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交...

  • vue移动端项目搭建

    本项目搭建适用于h5移动端的vue项目搭建,主体是基于vue-cli3脚手架,目的在于搭建个可用于快速启动项目的基...

网友评论

      本文标题:vue完整项目的搭建

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