一、vue cli脚手架
Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架,通过这个工具我们就可以很方便的来创建一个基于vue的项目。
二、安装一些必要的东西node、npm、webpack、vue-cli
在用 Vue 构建大型应用时推荐使用 NPM 安装,基于node.JS,NPM 能很好地和诸如webpack或browserify模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
1、安装node.js;从nodejs官网下载并安装node,安装完成后,在命令行里输入node -v或node --version 查看是否安装成功。安装成功后,会出现相应的版本号,如下图。

2、安装npm;在命令行里输入npm install -g 或者使用cnpm利用淘宝镜像会更快。同样输入npm -v 查看是否成功。

3、安装webpack;在命令行里输入:npm install webpack -g,安装完成之后输入 webpack -v,如果出现相应的版本号,则说明安装成功。

4、安装vue-cli;在命令行里输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如果出现相应的版本号,则说明安装成功。

三、创建项目
vue init webpack xxxxx(注意:起的名字符合package.json中name命名规则,不要出现大写字母,中文,空格,下划线,可以使用-) 基于webpack来构建一个名称为xxxxx的vue项目
 
下一步

Project Name:xxxxx    要创建的项目名称(默认为当前创建的项目目录名称,也可以重新命名,但是同样需要符合规则)

Project Description:项目简介,可选填

Author:项目作者,可选填

下一步直接回车

Install vue-router:是否安装vue路由组件,如果在这里没选择,后面可以自行添加,

Use ESLint to lint your code:是否需要使用ESLint模块进行代码检测(这个东西,刚开始我一直没安装过,后来项目用过以后,觉得很好用,不用反而不习惯代码不规范了。建议使用)

Setup unit tests :是否安装测试(单元测试)

Setup e2e tests with Nightwatch?:是否安装端到端的测试

创建一个vue-cli项的更多相关文章

  1. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  2. 手动实现一个vue cli

    目录 手动实现一个vue cli 1. 思考准备 2. 我们组织源码将会放在名为src的目录,webpack 打包需要一个入口文件,我们取作 main.js 3. 先预想以下会用到哪些基本依赖,第一个 ...

  3. vue3官网介绍,安装,创建一个vue实例

    前言:这一章主要是vue的介绍.安装.以及如何创建一个vue实例. 一.vue介绍 vue3中文官网:建议先自己看官网. https://v3.cn.vuejs.org/ vue是渐进式框架,渐进式指 ...

  4. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

  5. 【vue】创建一个vue前端项目,编译,发布

    npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...

  6. 开始创建一个 Vue 项目

    开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...

  7. 创建一个 Vue 的实例

    每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({         // 选项 }) 选项:el.data.methods el: 类型: ...

  8. 创建一个vue实例

    创建一个vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue ...

  9. 使用vue-cli创建一个vue项目

    安装vue-cli npm install -g @vue/cli 1, 使用vue创建一个项目 vue create luffy 2, 安装所需的插件 npm install vue-router ...

  10. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

随机推荐

  1. 文件的特殊权限(SUID,SGID,SBIT)

    文件的一般权限:r w x  对应 421  文件的特殊权限:SUID SGID SBIT对应 421  文件的隐藏权限:chattr设置隐藏权限,lsattr查看文件的隐藏权限. 文件访问控制列表: ...

  2. HashTable, HashMap,TreeMap区别

    java为数据结构中的映射定义了一个接口java.util.Map,而HashMap Hashtable和TreeMap就是它的实现类.Map是将键映射到值的对象,一个映射不能包含重复的键:每个键最多 ...

  3. 使用观察者模式更新Fragment的内容

    最近有个需求,就是在Fragment没有切换的时候(show,hide)更新Fragment显示的内容,想了一会,终于想到可以用观察者模式来解决这个问题的. 定义一个[被观察者(接口)]: publi ...

  4. 给B公司的一些建议(又一篇烂尾的文章)

    感慨:太多太多的悲伤故事,发生在自己身上,发生在自己的身边.因此,为了避免总是走"弯路",走"错误"的道路,最近一直在完善自己的理论模型. 烂尾说明:本文是一篇 ...

  5. TCP/IP网络编程之域名及网络地址

    域名系统 DNS是对IP地址和域名进行互相转换的系统,其核心是DNS服务器.提供网络服务的服务端也是通过IP地址来区分的,但由于IP地址难于记忆,因此通过容易记忆并表述的域名来取代IP地址 在浏览器地 ...

  6. 洛谷P1162 填涂颜色

    题目链接:https://www.luogu.org/problemnew/show/P1162 这道题是LITTLESUN写的第一道BFS哦! 对于这道题的的思路是把封闭图形外边的0标记一边,在最后 ...

  7. day 17 jQuery

    什么是jQuery? 可以把它认为是python中的模块,导入就可以使用模块中的功能. jQuery 的版本: 1.xx 系列 2.xx 系列 3.xx 系列 最常用的为1 系列,1系列最新版为1.1 ...

  8. jxl教程图文详解

    近来学习了下jxl的操作Excel报表功能,现有的API基本可以满足当前的需要,抽空做了一个学生成绩查询报表的例子. 先看效果图: 从图中可以看到这是一个交叉报表,横向到Q列,纵向有22行,全部是通过 ...

  9. RESTful-rest_framework版本控制、分页器-第六篇

     版本控制: 源码位置分析第一步: 源码位置分析第二步:在APIView-despath方法-initial-determine_version #执行determine_version,返回两个值, ...

  10. REDIS基础笔记

    Redis基础笔记 资源链接 简介 简介 安装 五种数据类型及相应命令 1. 字符串类型 2. 散列类型 3. 列表类型 4. 集合类型 5. 有序集合 其他 事务 SORT 生存时间 任务队列 发布 ...