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. input 限制输入数字和小数

    //input 限制输入数字和小数 <input type="text" name="demo" value="" onkeyup=& ...

  2. Centos 改ssh 端口

    1.修改配置文件:/etc/ssh/sshd_config 2.修改 #Port 22 把前面的#注释删掉,然后添加一个Port XXXX 定义一个自己的.例如我喜欢 Port 22333 3.修改后 ...

  3. Laravel 中使用 Repository 模式

    在本文中,我会向你展示如何在 Laravel 中从头开始实现 repository 设计模式.我将使用 Laravel 5.8.3 版,但 Laravel 版本不是最重要的.在开始写代码之前,你需要了 ...

  4. 第12章、乐活人生的ABCDE

    目录 第12章.乐活人生的ABCDE 什么时候该乐观 让自己乐观的ABC 确认ABC 你的ABC记录 反驳和转移注意 转移注意 反驳 保持距离 学习与自己争辩 证据 其他可能性 暗示 用处 你的反驳记 ...

  5. 基于JSON的接口测试框架

    更多学习资料请加QQ群: 822601020获取 实现效果 需求场景: 公司微服务接口使用数字签名的方式, 使用Postman调试接口每次都需要修改源码将验签临时关闭, 但是关闭后,其他微服务不能正常 ...

  6. wx.navigateTo和wx.redirectTo的不同

    wx.navigateTo保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.redirectTo关闭当前页面,跳转到应用内的某个页面.就是不能返回了. ...

  7. meshing-局部加密

    原视频下载地址: https://pan.baidu.com/s/1nvSf5qh 密码: cpbs

  8. 使用C#代码调用Web API

    1. POST POST的参数需要加上[FromBady],且参数只能一个 客户端提交数据的时候ContentType 为 application/x-www-form-urlencoded 或者 a ...

  9. known_hosts有什么用?

    一.问题描述 当我连接我的服务器的时候,返回信息如下 二.问题分析 返回的信息是什么意思? IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! ...

  10. [RK3288] 外接USB设备出现丢数

    CPU:RK3288 系统:Android 5.1 主板外接 USB 接口的外设,经常会出现丢数的现象,这种问题在很多 USB 接口的外设上都遇到过,例如:USB读卡器.USB扫描枪等 有一个共同点是 ...