原文:

  简书原文:https://www.jianshu.com/p/1af9b72cf86e

大纲

  1、安装NodeJs
  2、安装vue-cli
  3、创建项目
  4、启动项目
  5、打包项目
  6、项目实例

1、安装NodeJs

  NodeJs安装好之后会连带着安装一个npm,nodeJs的安装流程很简单,按着步骤一步一步下来即可。
  安装完成之后在控制台上输入npm -v 以及 node -v若成功则会输出对应版本,并且已经将npm和node部署到了全局的环境变量。

2、安装vue-cli

  安装完成之后,可以通过vue list来查看可以使用哪些模板

npm install -g vue-cli

3、创建项目

  完成项目的一系列配置

vue init webpack <your project>

4、启动项目

npm run dev

  启动之后的提示端口8080中打开了应用

5、打包项目

npm run build

6、项目实例

  vue项目实例中的vue-base中就是我自己搭建的vue的初始项目。

参考网址

  https://segmentfault.com/a/1190000010659925

使用vue-cil搭建项目的更多相关文章

  1. 1.vue脚手架搭建项目

    前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...

  2. Vue环境搭建-项目的创建-启动生命周期-组件的封装及应用

    vue项目环境的搭建 """ node >>> python:node是用c++编写用来运行js代码的 npm(cnpm) >>> p ...

  3. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  4. 使用vue脚手架搭建项目并将px自动转化为rem

    一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...

  5. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  6. nodejs使用vue从搭建项目到发布部署

    都说是使用vue 脚手架自然用的是vue-cli npm install vue-cli -g 建立项目 vue init webpack demo //vue初始化 使用webpack 项目名称 这 ...

  7. 【vue】vue +element 搭建项目,mock模拟数据(纯干货)

    1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设 ...

  8. 使用VUE框架搭建项目基本步骤

    ps:初入Vue坑的小伙伴们,对于独立做一个项目可能不清楚需要使用哪些资源,这篇随笔希望对大家有所帮助. 第一步:参照vue的官方文档,建立一个vue的项目 # 全局安装 vue-cli $ npm ...

  9. vue+webpack搭建项目

    1.全局安装node.js 2.安装vue-cli 可以在项目目录安装 npm install -g vue-cli 使用vue-list命令选择webpack模板 vue init webpack ...

  10. VUE神速搭建项目

    1.npm install -g vue-cli 全局安装vue-cli脚手架 2.vue init webpack vueTest 初始化一个基于webpack的项目 3.cd vueTest 进入 ...

随机推荐

  1. react-native React Native version mismatch

    android/app/build.gradle     file: dependencies { compile fileTree(dir: "libs", include: [ ...

  2. springboot整合Beetl、BeetlSql实现ajax分页

    Beetl是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,超过当前流行的模板引擎.而且还易学易用. BeetSql是一个 ...

  3. HDU1050:Moving Tables

    pid=1050">Moving Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  4. Css3 过渡(Transition)特效回调函数

    Css3 出来之后,能够说是替代了Flash,通过使用Html5和Css3的完美结合.就能够做出不论什么你想得到的特效,这里不再阐述... 近期在做一个喝水签到的功能.在想签到成功之后,签到框能够模拟 ...

  5. Filebeat的下载(图文讲解)

    第一步:进入Elasticsearch的官网 https://www.elastic.co/ 第二步:点击downloads https://www.elastic.co/downloads 第三步: ...

  6. position记录

    1.  relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位.可通过z-index进行层次分级.均是以父级的左上角 ...

  7. BZOJ3530: [Sdoi2014]数数(Trie图,数位Dp)

    Description 我们称一个正整数N是幸运数,当且仅当它的十进制表示中不包含数字串集合S中任意一个元素作为其子串.例如当S=(22,333,0233)时,233是幸运数,2333.20233.3 ...

  8. 2018-8-10 模拟赛T3(可持久化线段树)

    出题人说:正解离线按DFS序排序线段维护区间和 但是对于树上每个点都有一个区间和一个值,两个点之间求1~m的区间和,这不就是用可持久化线段树吗. 只不过这个线段树需要区间修改,不过不需要标记下传,询问 ...

  9. Mysql 简介二

    Mysql 数据库引擎: 数据库引擎是用于存储.处理和保护数据的核心服务 Mysql支持的引擎一般有这几种: MyISAM Mysql 5.1版本之前默认的存储引擎,仅仅支持表锁,但查询速度较Inno ...

  10. WEB安全实战(二)带你认识 XSS 攻击

    前言 上一篇文章写了关于 WEB 安全方面的实战,主要是解决 SQL 盲注的安全漏洞.这篇文章本来是要写一篇关于怎样防治 XSS 攻击的,可是想来想去,还是决定先从理论上认识一下 XSS 吧.下一篇文 ...