1.第一步:安装vue-cli

命令行输入cmd或按住shift鼠标右键打开powershell

输入命令

npm install --global vue-cli 按enter键

2.第二步:创建项目

在要创建项目的目录下输入以下命令

vue init webpack projectName(其中projectName为要创建的项目名称)

按下enter键

然后终端会出现下图“一问一答”模式,如图:

这里有几个需要说明一下,没说明的直接回车选择默认

“Project name”:这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车

“Install vue-router”:是否需要vue-router,这里默认选择使用,这样生成好的项目就会有相关的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint,刚才说了我们这个项目需要使用所以也是直接回车,默认使用,这样会生成相关的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安装单元测试。我们现在还没有单元测试

“Setup e2e tests with Nightwatch”:是否安装e2e测试,这里我也同样选择的是“N”。

最后会提示选择管理工具,选择npm或yarn都可以,两者的指令有所不同,这里就选择npm

初始化完成后按照提示进入项目目录,输入 npm run dev启动项目

vue-cli2.0项目的搭建的更多相关文章

  1. Vue cli2.0 项目中使用Monaco Editor编辑器

    monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...

  2. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

  3. vue/cli2.0优化

    vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...

  4. Vue3.0项目快速搭建

    安装安装vue-cli npm install -g @vue/cli # 或者 yarn global add @vue/cli 创建项目 vue create hello-world 至此项目搭建 ...

  5. vue 3.0 项目搭建移动端 (七) 安装Vant

    # 通过 npm 安装 npm i vant -S 安装完配置 babel.config.js module.exports = { presets: ['@vue/app'], plugins: [ ...

  6. vue 3.0 项目搭建移动端 (六) 命名路由同级控制

    const Tabbar = () => import('@/components/Tabbar'); export default [ { path: '/', name: 'home', c ...

  7. 3 webpack 4 加vue 2.0生产环境搭建

    1 在前两篇笔记中已经能把开发环境弄好了,接来下构建他的生产环境 2 使用npm 安装url-loader和file-loader来支持图片和字体 npm install --save-dev url ...

  8. Vue 2.0 项目在IE下显示空白

    新写的项目在 IE浏览器显示空白 解释一: Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy ...

  9. vue 3.0 体验,vue 3.0新特性

    前言 昨天不是尤雨溪 不是刚在B站 直播玩了,分享了vue-next v3.0.0-beta.1 版本 哈哈, 不要太刺激哦 6大亮点 Performance:性能更比Vue 2.0强. Tree s ...

随机推荐

  1. Oracle 控制文件损坏解决方案

    Oracle 控制文件损坏解决方案 故障一:丢失(损坏)一个控制文件 前台报错:ORA-00205:error in identifying control file,check alert log ...

  2. Chrome安装.crx文件

    解决"只能通过Chrome网上应用商店安装该程序"的方法 http://chromecj.com/utilities/2015-04/423.html 1.更多工具->扩展程 ...

  3. P1608 路径统计

    题目描述 “RP餐厅”的员工素质就是不一般,在齐刷刷的算出同一个电话号码之后,就准备让HZH,TZY去送快餐了,他们将自己居住的城市画了一张地图,已知在他们的地图上,有N个地方,而且他们目前处在标注为 ...

  4. 第九届蓝桥杯(A组填空题)

    1.标题:分数 1/1 + 1/2 + 1/4 + 1/8 + 1/16 + …. 每项是前一项的一半,如果一共有20项, 求这个和是多少,结果用分数表示出来. 类似: 3/2 当然,这只是加了前2项 ...

  5. 静态blog的免费托管部署、加域名与搜索优化(SEO)

    本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/technical/hugo_blog_host_and_seo 给博客加个域名准备长 ...

  6. Seata 中类SPI使用机制分析

    Seata中采用了与sofa-rpc和dubbo中相同的服务扩展机制.都是基于JAVA自身的服务发现机制-SPI进行再次封装注解,sofa-rpc和dubbo(@Deprecated)中的注解名字叫做 ...

  7. [Codeforces1148C]Crazy Diamond——构造

    题目链接: [Codeforces1148C]Crazy Diamond 题目大意: 给出一个$1\sim n$的排列要求将其排序,每次能交换两个位置的数当且仅当这两个位置下标差的绝对值大于等于$\f ...

  8. Python 学习随笔 - 2 - list 、tuple 、dict、set 特殊数据类型 及 实际应用

    1.list list是一种有序的集合,可以随时添加和删除其中的元素;  和C语言不同的地方是list里的元素甚至可以是不同类型的,甚至是另个list 例如:['A', 'B', 'C']   ['A ...

  9. 知乎面试【五轮技术+HR】

    今年下半年去知乎面试了两次,讲道理来说,知乎有CD期, 一旦上一次面试没有通过.在一段时间内,不能再次面试知乎.后来在同事的内推下,再次获得面试机会,哈哈~~,这次面试时间还是挺长的,特记录一下. 7 ...

  10. ML_Review_GMM(Ch10)

    Note sth about GMM(Gaussian Mixtrue Model) 高斯混合模型的终极理解 高斯混合模型(GMM)及其EM算法的理解 这两篇博客讲得挺好,同时讲解了如何解决GMM参数 ...