本文档目的在于让对vue了解比较少的同学,能够快速搭建属于自己的vue项目。(window)

一、构建项目的前提条件

  1、确保本机安装了node.js ^6 --> javascript 的服务端的运行环境

  2、确保本机安装了npm ^2     --> npm的包的管理工具

  注意:如果你装了node.js 和 npm 请检查它们对应的版本号。

    1、win + r 打开cmd,键入 node -v 回车

    

    2、键入 npm -v

    

    符合vue的开发环境,我们不多啰嗦直接进入项目构建。

二、构建自己的vue-cli应用

  1、因为vue脚手架的一些好用的功能是基于webpack模块的,所以首先你应该全局安装webpack模块(安装成功后应该会出现版本号)

     npm install webpack -g //全局安装webpack

     webpack -v //检查webpack是否安装成功, 成功即出现版本号。

     

  2、全局安装vue-cli

      npm install vue-cli -g

      vue -V // 检查vue-cli是否安装成功 成功出现如下提示

      

  3、构建一个名字叫做report的项目

      vue init webpack report // 在cmd当前目录下,创建一个名字叫做report的项目

           回车后,会出现很多yes/no的选项,这里根据个人需求选择是否安装。在这里个人建议先全部都选择no不安装,后期需要那个模块我们自己安装。这样印象深刻并且能够

     学会如何自己配置项目中应用的模块。

      注意:在这里最后的 npm install 选择上,这是安装vue-cli基本的包。等待安装结束后。

  4、进入项目文件夹,启动项目

     cd report // 进入文件夹

     npm run dev // 启动项目

     

      最后出现localhost:8080字样便可放入浏览器地址栏中进行访问vue-cli的默认组件

      注意:

       后面的端口可能不是8080,因为8080是vue-cli默认配置的端口号。如果本机开启了其他服务,webpack会自动检测,并且分配一个新的端口,有可能是8081、

      8082。这个不要在意,字节使用就可以了。

个人邮箱:wangweizhangweb@163.com

姓名:王维璋

有问题随时交流,不怕打扰。

最后:

  本文档意在与帮助初学者快速构建vue项目,虽没什么技术含量。但不要随意转载,如需转载保存。需署名。谢谢配合。

    

  

  

  

vue-cli -- > 项目基本构建的方法的更多相关文章

  1. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  2. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  3. vue/cli项目添加外部js文件的一个方法

    有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...

  4. Vue.js项目脚手架构建

    vue.js文档:https://cn.vuejs.org/v2/guide/ 参考这个或者参考菜鸟教程也可以,不过还是那句话官网权威. 我这个主要是看相关的学习视频搭建的. 一.环境准备 环境准备( ...

  5. vue初始化项目,构建vuex的后台管理项目架子

    构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...

  6. vue cli 项目的提交

    前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...

  7. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  8. Vue cli项目开启Gzip

    目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...

  9. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

随机推荐

  1. POJ1008 Maya Calendar

    题目来源:http://poj.org/problem?id=1008 题目大意: Maya人认为一年有365天,但他们有两种日历.一种叫做Haab,有19个月.前18个月每月20天,每个月的名字分别 ...

  2. Kibana6.2.x 插件理解

    官方地址:https://www.elastic.co/guide/en/kibana/current/development-uiexports.html Type Purpose hacks An ...

  3. hdu6438 Buy and Resell 买卖物品 ccpc网络赛 贪心

    题目传送门 题目描述: 有n座城市,每座城市都可以对一个物品进行一次的买进或者卖出,可以同时拥有多个物品,计算利润最大值,并且交易次数要最少.(买入卖出算两次操作) 思路: 建立两个小根堆 优先队列, ...

  4. Python入门8文件处理

    文件处理文本模式name = input("请输入用户名:").strip()with open("a.txt","wt",encoding ...

  5. zookeeper崩溃修复

    cat /etc/zookeeper/conf/zoo.cfg 找到dataDir=/var/lib/zookeeper 切换到路径/var/lib/zookeeper cd /var/lib/zoo ...

  6. Lambda 快速改造

    对于只有一个参数的接口类,可以使用e->{}  idea会给出快速提示 先写正常的表达式 将虚线处直接删掉, 在原来的方法参数和左大括号之间加上 -> 改造后比原来少了几行, 对于熟手阅读 ...

  7. SpringMVC DeferedResult和servlet3.1 AsyncContext异步请求

    先看一个简单的示例: @RequestMapping("/getFuture") public Future<String> getFuture() { System. ...

  8. io基础(字节流、字符流、转换流、缓冲字符流)

    首先需要明确的一点是输入流输出流的输入输出是站在内存的角度看的,读取文件,把文件内容写到内存中,是输入流:写文件,把内存中的数据写到文件中,是输出流. IO操作主要有4个抽象类: 字节输入输出流:In ...

  9. Mac 终端执行sql命令

    https://www.cnblogs.com/sbj-dawn/p/6905930.html. 远程登录MYSQL数据库 > mysql -u username -p -h hostname ...

  10. Unity 物体旋转会发生变形

    当游戏对象的 "父物体们" 有一个是缩放的,也就是Scale不是(1,1,1)的时候,旋转这个游戏对象它就会出现变形的现象.