> vue-cli 的脚手架项目模板有browserify 和 webpack , 现在自己在用的是webpack , 官网给出了两个模板: webpack-simple 和 webpack 两种。两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能,普通项目基本用webpack-simple 就足够了.

搭建官方项目模板步骤: 

  1、npm install  vue-cli (安装vue-cli )  有的时候有看到其它两种写法:  --save-dev 和 --save的写法。这两个有一定的区别,我们都知道package.json  中有一个 “dependencies” 和 “devDependencies” 的。dependencies 是用在开发完上线模式的,就是有些东西你上线以后还需要依赖的,比如juqery , 我们这里的vue 和 babel-runtime(Babel 转码器 可以将ES6 转为ES5 ), 而devDependencies 则是在开发模式执行的,比如我们如果需要安装一个node-sass 等等。有的时候看到package.json中安装的模块版本号前面有一个波浪线。例如: ~1.2.3 这里表示安装1.2.x以上版本。但是不安装1.3以上。

  2、vue init webpack-simple yourdemoname  下载一个webpack-simple项目,这里的webpack-simple 是固定的,也就是官网的项目模板。youdemoname 这个是你自己项目的名字。 执行这个步骤以后。就会弹出询问 “项目名称..项目描述“等等问题 直接按照提示操作。这个时候对应的项目目录下就出现刚刚建立的项目了。

  3、我们还需要把项目的依赖下载下来。使用命令:  cd youdemoname 然后执行npm install 就可以了,这个时候你的项目中有多了一个node_modules 目录

  4、使用"npm - run - dev" 命令来运行项目 "npm-run-bulid" 来执行发布,会自动生成dist文件

vue-cli 脚手架总结的更多相关文章

  1. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  2. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  3. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  4. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  5. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  6. vue cli 脚手架上多页面开发 支持webpack2.x

    A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改.  项目地址:  ...

  7. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  8. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  9. vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

    废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...

  10. 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

    Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...

随机推荐

  1. 10个热门IT证书

    MCP (微软专家认证) CCNA (思科认证网络支持工程师) MCPD (微软认证开发专家) SCJP (SUN认证Java程序员) CISSP (信息系统安全认证专家) CompTIA A+认证 ...

  2. android屏蔽状态栏显示

    framework/base/packages/SystemUI/res/layout/status_bar_expanded.xml 要屏蔽哪个设置哪个属性为: android:visibility ...

  3. [React] React Router: hashHistory vs browserHistory

    In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browse ...

  4. 关于ubuntu中的软件安装

    在ubuntu中一般使用apt-get来安装软件工具, 例如 sudo apt-get install g++ apt-get会在镜像库中找到你需要的软件镜像(例如 g++)来安装,那么apt-get ...

  5. Mac下如何不借助第三方工具实现NTFS分区的可写挂载

    问题背景 我想很多使用Mac的同学都会遇到读写NTFS磁盘的问题,因为默认情况下Mac OSX对NTFS磁盘的挂载方式是只读(read-only)的,因此把一个NTFS格式的磁盘插入到Mac上,是只能 ...

  6. 从Ueditor跨域上传,总结的一次跨域上传的爬坑经历

    项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...

  7. 一、webpack那点事-安装、环境搭建

    前言: 还记得两年前刚来公司才几个月,经理就安排我去做JS地图相关的维护和开发工作,然后就跟着一个公司老鸟(没俩月他离职了)熟悉地图相关的功能. 本人嘛,那会前端JS实际开发经验也才几个月,然后当我看 ...

  8. C/C++中逗号表达式的用法

    代码: #include <cstdio> #include <iostream> using namespace std; int main(){ int t1,t2; t1 ...

  9. (原)ubuntu14.04中安装gcc4.9和g++4.9

    http://stackoverflow.com/questions/28683747/installing-gcc4-9-on-ubuntu-14-04-lts http://askubuntu.c ...

  10. 网站的优化----首页优化---app调取服务端数据

    高并发经常会发生在有大活跃用户量来访问网站的某个点,例如用户高聚集的业务场景中,如:抢购,促销等.为了让用户流畅的访问网站,来根据自己的业务设计适合系统的处理方案. //对于APP网站首页数据,通常是 ...