1.安装node.js(已安装可直接跳过,建议查看node版本,node -v);

2.npm包管理器,是集成在node中的,可跳过(npm -v);

3.由于npm的有些资源被墙,为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。(全局安装: npm install -g cnpm,查看版本:cnpm -v)

4.vue安装: npm install vue或者采用cnpm安装;npm与cnpm安装的区别在于一个慢一个快,一个下载的东西不杂一个杂;

5.安装vue-cli脚手架构建工具,全局安装 cnpm install --global vue-cli

6.创建一个基于 webpack 模板的新项目, vue init webpack my-project,(my-project为自己项目的文件夹)

注意事项:

Project name (my-project) # 项目名称(我的项目)

Project description (A Vue.js project) # 项目描述一个Vue.js 项目

Author 作者(你的名字)

Install vue-router? (Y/n) # 是否安装Vue路由(但页面应用需要的模块)

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])建议N

Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)建议N

Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)建议N

Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)建议N

7.安装项目依赖, cnpm install ($ cnpm i)

8.运行环境, cnpm run dev;

附:vue init mpvue/mpvue-quickstart firstapp (生成使用vue的微信小程序)

怎么构建vue-cli项目的更多相关文章

  1. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  2. 从无到有构建vue实战项目(一)

    vue的安装 首先下载nodehttp://nodejs.cn/download/ 有两种安装方式安装包安装和二进制文件安装 输入以下命令,出现版本提示表示安装成功: node -v 10.15.3 ...

  3. 从无到有构建vue实战项目(四)

    六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...

  4. Vue cli项目开启Gzip

    目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...

  5. 从无到有构建vue实战项目(二)

    二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...

  6. vue cli 项目的提交

    前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...

  7. 从无到有构建vue实战项目(三)

    四.响应式布局的实现 elemnt-ui参考bootatrap提供了响应式布局,附上地址:https://element.eleme.cn/#/zh-CN/component/layout 以下是我的 ...

  8. 从无到有构建vue实战项目(五)

    八.错误总结(一) webpack打包项目识别子组件路径问题 之所以出现了这样的问题是因为在webpack打包项目时,未将此处的子组件路径正确识别: 将此处的carousel改为carousel.vu ...

  9. 从无到有构建vue实战项目(六)

    十.徒手撸一个vue下拉左侧二级导航 先附上最终效果图: vue代码: <div class="dropdown-menu-explore" v-on:mouseover=& ...

  10. 从无到有构建vue实战项目(七)

    十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vu ...

随机推荐

  1. 前端Mahsup异步依赖方式不能做业务数据依赖

    很久之前流行mashup方式做内容集成,之前为了IP定位的方便,引用了第三方的IP定位JS,然后根据其内容与服务器同步地址数据并写入Cookie,可是这种方式一旦,第三方的库反应缓慢时,就会出现大问题 ...

  2. php坏境安装Xdebug详情步骤

    原创,转载请注明出处! Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况,可以说是程序员必备的一个工具之一.好了,进入正题: 1.下 ...

  3. HTML学习笔记4:文档申明和编码标签

    ①文档申明     作用:为了使浏览器更好的显示HTML文件,必须告知浏览器你的文件为HTML     语法:<!DOCTYPE html> 声明必须放在HTML文档第一行 声明不是HTM ...

  4. Laravel 框架 基础(一)

    Laravel 框架 laravel 5.2 在 5.1 基础上继续改进和优化,添加了许多新的功能特性:多认证驱动支持.隐式模型绑定.简化 Eloquent 全局作用域.可选择的认证脚手架.中间件组. ...

  5. 使用webpack打包后的vue项目如何运行(express)

    我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css.js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错 ...

  6. Web开发环境搭建 Eclipse-Java EE 篇

    Web开发环境搭建 Eclipse-Java EE 篇 [原创内容,转载注名出处] 1. 下载和安装 1.1 下载JDK 在Java官方网站下载最新版本的 Java SE:  http://www.o ...

  7. Maven学习(四)-- Maven的核心概念

    摘自:http://www.cnblogs.com/xdp-gacl/p/4051819.html 一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1. ...

  8. linux常用的时间获取函数(time,gettimeofday,clock_gettime,_ftime,localtime,strftime )

    time()提供了秒级的精确度 1.头文件 <time.h> 2.函数原型 time_t time(time_t * timer) 函数返回从TC1970-1-1 0:0:0开始到现在的秒 ...

  9. shell 中test命令

    test可用于测试表达式,支持测试的范围包括:字符串比较,算术比较,文件存在性.属性.类型等判断.例如,判断文件是否为空.文件是否存在.是否是目录.变量是否大于5.字符串是否等于"longs ...

  10. SSM-Spring-11:Spring中使用代理工厂Bean实现aop的四种增强

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 说说那四种增强:前置增强,后置增强,环绕增强,异常增强 那什么是代理工厂bean呢? org.springfr ...