zoukankan      html  css  js  c++  java
  • 前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo

    一、软件及命令:

    (1)下载node.js 最新的LTS 版本,下载 msi格式的(直接点击安装即可)。

    (2)命令1:npm install cnpm -g

             命令2:cnpm install webpack -g

             命令3:cnpm install vue-cli -g

    二、安装过程(熟练者可以直接跳过安装过程,直接使用上述命令安装即可) 

    1、安装 node,首先去官网下载LTS(Long Term Support)长期支持版本,网址 https://nodejs.org/zh-cn/

       

          下载完成后直接点击下一步安装即可,安装完毕后使用 进入 Dos ,使用 node -v 查看安装是否成功,看到版本号就证明已经安装成功,如下图。

    2、全局安装淘宝镜像 cnmp (国内服务器下载快)  -g (代表全局安装)

     执行命令 npm install cnpm -g,等待安装完毕,如下图

    npm install cnpm -g

    3、全局安装webpack (一种打包工具)

         执行命令  cnpm install webpack -g ,等待安装完毕,如下图

     cnpm install webpack -g

    4、 全局安装 vue-cli (vue 项目开发的工具,脚手架,一种别人搭好的架子,我们直接在上面开发我们的项目,打包发布就行了)

        执行命令,cnpm install vue-cli -g,等待安装完毕,如下图

      cnpm install vue-cli -g

    至此,vue+webpack 的开发环境已经安装完毕。

    5、还是做一个 demo 吧,万一有初学者看到这个帖子,也算给别人一个指点吧。

         首先选择一个你要存放项目文件的目录,进入目录,在文件系统的地址栏输入cmd,点击回车。如下

    (1)

     

    (2)

     (3)

     

    (4)执行如下命令,创建项目,项目名称为 vue-demo (自定义的,随你喜欢)

    vue init webpack vue-demo,等待安装完毕(快慢取决于你的网速,一般1-2分钟可以完毕),过程中会输入一些配置,也是随你喜欢的。如下图

    图1安装前的配置, 图2 安装完成

     

      至此脚手架工具已经把我们的项目初始化完毕,接下来我们来启动项目。

    ( 5)首先进入 项目目录,执行命令     cd vue-demo(你的项目名字)  如下图

    (6)运行 cnpm install (这个命令是以后你创建任何的 vue-cli+webpack 项目首先要执行的)命令 安装项目依赖,如下图

     (7) 执行cnpm run dev 运行项目,运行成功的截图如下。

      

     (8) 浏览器 输入 http://localhost:8080  查看效果。此项目是 脚手架项目的示例,以后会持续更新 vue 项目开发的其他知识。

  • 相关阅读:
    安装MSSQL2008出现的问题记录
    制作安装包遇到的问题
    算法设计方法动态规划
    基础果然要牢记(一次失败的电面)
    搜狗垂搜笔试
    几种堆的时间复杂度分析
    正则表达式转NFA
    组合数学(1)
    算法设计方法贪心算法
    最短路径问题
  • 原文地址:https://www.cnblogs.com/spqin/p/12934593.html
Copyright © 2011-2022 走看看