zoukankan      html  css  js  c++  java
  • vue-cli -- > 项目基本构建的方法

    本文档目的在于让对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项目,虽没什么技术含量。但不要随意转载,如需转载保存。需署名。谢谢配合。

        

        

      

      

  • 相关阅读:
    SCP测试服务器的上行/下行带宽
    React-Native 之 GD (四)使用通知方式隐藏或显示TabBar
    React-Native 之 GD (五)属性声明和属性确认 及 占位图
    React-Native 之 GD (三)近半小时热门
    React-Native 之 GD (二)自定义共用导航栏样式
    React-Native 之 GD (一)目录结构与第三方框架使用与主题框架搭建
    React Native商城项目实战16
    React Native商城项目实战15
    React Native商城项目实战14
    React Native商城项目实战13
  • 原文地址:https://www.cnblogs.com/wangweizhang/p/10240175.html
Copyright © 2011-2022 走看看