zoukankan      html  css  js  c++  java
  • windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了。我要把我所参考的文档和实际遇到的问题分享给大家。由于本人也是初级菜鸟一枚,如果有错误,还望谅解指正。下面言归正传:

    所参考的文档链接:http://blog.csdn.net/syyling/article/details/52004892

                             http://www.cnblogs.com/ixxonline/p/6007885.html (i笑笑Online的博客

                             http://www.cnblogs.com/ganmy/p/6029774.html

                             http://www.imooc.com/qadetail/184021?t=276040

    前言,做项目的时候我用git比较多,所以我是首先安装的git,他的右键git bash here定位比cmd的命令行要准确,接下来的命令都是利用git的git bash here。

    1、首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要安装node.js。node.js的官方地址为:https://nodejs.org/en/download/,下载完毕,按照windows一般应用程序,一路next就可以安装成功,建议不要安装在系统盘(如C:)。

    2、安装完node之后,就要安装cnpm,由于许多npm包都是在国外,安装起来特别慢,所以我们这里利用淘宝的镜像服务器,来对我们依赖的module进行安装。

    安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org  之后回车等待命令

    3、接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架

    命令为:cnpm install -g vue-cli,回车,等待安装

    安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了。

    4、紧接着,就该创建项目了,自己找一个合适的地方,新建一个项目文件夹,根据自己的需要命名,我的命名为 my-vue,然后,打开此文件夹,右键git bash here,定位到此文件夹,输入:vue init webpack my-vue(项目文件夹名),回车,等待一小会儿,依次出现‘git’下的项,可按下图操作:

    此时,观察my-vue的文件夹下又多了一个vue-test文件夹,这个就是vue项目的文件夹,如图所示:

    5.之后通过命令:cd vue-test 进入此文件夹,在利用命令:cnpm install,回车,等待一小会儿,回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)。

    6、在命令行里继续输入 cnpm run dev来测试环境是否搭建成功,如果出现如下图说明成功了:

    在浏览器里输入localhost:8080就可以查看页面如下:

    但是,,,,一出现但是,就有可能是坏情况了,我到最后一步的时候,运行 cnpm run dev的时候,就出现了错误,错误信息类似下图的信息:

    ,它提示npm应该更新到3.0.0版本,所以我从网上各种搜怎么更新npm的版本,关于版本更新的问题各有说法而且都不怎么起作用,依然是运行不成功,最终找到了一种办法,按照之前安装node 的相同的路径,重新下载一个最新版本的node安装,这个办法简单暴力。究其原因,是因为我将node的配置文件的registry配成了国内某镜像,然而国内某镜像未做到最新版本同步,仍保持在了4.4.7,而其对应的很多npm 安装包也并非最新,所以导致安装失败, 无法找寻到某些包的最新版本。所以重新安装是最好的解决办法了。重新安装完后,再运行cnpm run dev的时候就成功了。。至此,我的vue+webpack环境搭建终于大功告成了。

  • 相关阅读:
    DRUPAL-PSA-CORE-2014-005 && CVE-2014-3704 Drupal 7.31 SQL Injection Vulnerability /includes/database/database.inc Analysis
    WDCP(WDlinux Control Panel) mysql/add_user.php、mysql/add_db.php Authentication Loss
    Penetration Testing、Security Testing、Automation Testing
    Tomcat Server Configuration Automation Reinforcement
    Xcon2014 && Geekpwn2014
    phpMyadmin /scripts/setup.php Remote Code Injection && Execution CVE-2009-1151
    Linux System Log Collection、Log Integration、Log Analysis System Building Learning
    The Linux Process Principle,NameSpace, PID、TID、PGID、PPID、SID、TID、TTY
    Windows Management Instrumentation WMI Security Technology Learning
    IIS FTP Server Anonymous Writeable Reinforcement, WEBDAV Anonymous Writeable Reinforcement(undone)
  • 原文地址:https://www.cnblogs.com/jiajia123/p/6132265.html
Copyright © 2011-2022 走看看