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. 从linq的一次优化实践看group by+Min/Max()处理数据后需要额外的其他列问题

    问题简化如下: 假设有第三方的表结构如下(可能会出现完全相同的重复数据): 1.写SQL语句,查询每个学生的,userid.最高分.最高分的科目.最高分的考点.最低分.最低分科目.最低分考点(分数相同 ...

  2. 学到了林海峰,武沛齐讲的Day24-完 对象和实例

    学到这里估计就是坎了...日志都不想写了.. 对象和实例

  3. 代码 | 用ALNS框架求解一个TSP问题 - 代码详解

    写在前面 前面好多篇文章,我们总算是把整个ALNS的代码框架给大家说明白了.不知道大家对整个框架了解了没有.不过打铁要趁热,心急了要吃热豆腐.今天就来实战一下,教大家怎么用ALNS的代码框架,求解一个 ...

  4. start、就绪、运行状态的demo演示

    1.start状态: package com.roocon.thread.t1; public class NewThread implements Runnable { @Override publ ...

  5. GC和GC分配策略

    一.内存如何回收 解决如何回收问题,首先需要解决回收对象的问题?什么样的对象需要回收,怎么样的不需要回收?保证有引用的内存不被释放:回收没有指针引用的内存是Collector的职责,在保证没有指针引用 ...

  6. 2018-2019-2 20165234 《网络对抗技术》 Exp7 网络欺诈防范

    Exp7  网络欺诈防范 实验内容 1. 简单应用SET工具建立冒名网站 2. ettercap DNS spoof 3. 结合应用两种技术,用DNS spoof引导特定访问到冒名网站 4. 请勿使用 ...

  7. SQL优化 | Oracle 绑定变量

    之前整理过一篇有关绑定变量的文章,不太详细,重新补充一下. Oracle 绑定变量 http://www.cndba.cn/Dave/article/1275 一.绑定变量 bind variable ...

  8. 【集成模型】Bootstrap Aggregating(Bagging)

    0 - 思想 如下图所示,Bagging(Bootstrap Aggregating)的基本思想是,从训练数据集中有返回的抽象m次形成m个子数据集(bootstrapping),对于每一个子数据集训练 ...

  9. 命令行启动python的IDLE

    如果你电脑上使用了anaconda2,默认路径为python2,但是你又想使用anaconda2下的python3的idle 方法如下: 首先查看python的路径: (deeplearning3) ...

  10. Gitlab分支保护

    问题:使用Git时,会碰到需要对某个分支进行保护,避免其他人随意push. 这里以gitlab为例,具体操作如下: 1.进入项目 2.点击左侧列表中的Settings 3.点击Protected Br ...