vue 起步

桃扇骨 2021-09-20 13:14 430阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span># 全局安装 vue-cli</span> 
    </div> 
    <div>
      $ npm install --global vue-cli 
    </div> 
    <div> 
     <span># 创建一个基于 webpack 模板的新项目</span> 
    </div> 
    <div>
      $ vue init webpack my-project 
    </div> 
    <div> 
     <span># 安装依赖，走你</span> 
    </div> 
    <div>
      $ 
     <span>cd my-project</span> 
    </div> 
    <div>
      $ npm install 
    </div> 
    <div style="text-align:left;">
      $ npm run dev 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Vue.js是前端一个比较火的MVVM框架，要使用它，我们必须提前配置，其中有一种安装方式是使用npm，比较适合比较大型的应用。今天就来看看这种方式如何操作，由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.

# 步骤 #

首先我们需要下载npm，因为我已经提前安装了node.js,安装包里面集成了npm，然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。   
1.打开命令行窗口，输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

*  1

获取到cnpm以后，我们需要升级一下，输入下面的命令

cnpm install cnpm -g

*  1

因为安装Vue需要npm的版本大于3.0.0，所以我们要升级一下，

然后我们输入下面的命令，安装vue

cnpm install vue

*  1

接下来安装vue-cli

cnpm install --global vue-cli

*  1

此时环境就搭建好了。

2.接下来我们需要指定一个目录存放我们的项目，可以选择任意路径，确定好路径后输入下面的命令

vue init webpack "项目名称"

*  1

3.成功以后，我们进入项目所在目录

cd "项目所在文件夹"

*  1

然后依次输入下面的命令

cnpm install cnpm run dev

*  1
 *  2

![这里写图片描述][SouthEast]

成功后我们进入浏览器，输入localhost:8080会展示下面的页面

replenish:

# [vue init webpack-simple project 报错处理(connect ETIMEDOUT 192.30.253.112)][vue init webpack-simple project _connect ETIMEDOUT 192.30.253.112] #

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>Failed to download repo vuejs-templates/webpack-simple: connect ETIMEDOUT 192.30.253.113:443</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Failed to download repo vuejs-templates/webpack-simple: connect ETIMEDOUT 192.30.253.112:443，一直报这个错

解决步骤：

1.打开终端（cmd），输入命令：ping 192.30.253.112 发现连接超时；输入命令：ping github.com 显示超时。

2.打开 hosts文件，地址：C:\\Windows\\System32\\drivers\\etc  看是否是默认配置。默认配置如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code># Copyright (c) 1993-2009 Microsoft Corp.</code> 
     </div> 
     <div> 
      <code>#</code> 
     </div> 
     <div> 
      <code># This is a sample HOSTS file used by Microsoft TCP/IP for Windows.</code> 
     </div> 
     <div> 
      <code>#</code> 
     </div> 
     <div> 
      <code># This file contains the mappings of IP addresses to host names. Each</code> 
     </div> 
     <div> 
      <code># entry should be kept on an individual line. The IP address should</code> 
     </div> 
     <div> 
      <code># be placed in the first column followed by the corresponding host name.</code> 
     </div> 
     <div> 
      <code># The IP address and the host name should be separated by at least one</code> 
     </div> 
     <div> 
      <code># space.</code> 
     </div> 
     <div> 
      <code>#</code> 
     </div> 
     <div> 
      <code># Additionally, comments (such as these) may be inserted on individual</code> 
     </div> 
     <div> 
      <code># lines or following the machine name denoted by a '#' symbol.</code> 
     </div> 
     <div> 
      <code>#</code> 
     </div> 
     <div> 
      <code># For example:</code> 
     </div> 
     <div> 
      <code>#</code> 
     </div> 
     <div> 
      <code>#&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 102.54.94.97&nbsp;&nbsp;&nbsp;&nbsp; rhino.acme.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; # source server</code> 
     </div> 
     <div> 
      <code>#&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 38.25.63.10&nbsp;&nbsp;&nbsp;&nbsp; x.acme.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; # x client host</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code># localhost name resolution is handled within DNS itself.</code> 
     </div> 
     <div> 
      <code>#&nbsp;&nbsp; 127.0.0.1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; localhost</code> 
     </div> 
     <div> 
      <code>#&nbsp;&nbsp; ::1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; localhost</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如果不是，还原成默认配置。

无法连接github

1.打开终端（cmd），输入命令：ping 192.30.253.112 发现连接超时；输入命令：ping github.com 显示超时。

> 2.打开 hosts文件，地址：C:WindowsSystem32driversetc 看是否是默认配置。  
> 3.在本地hosts文件中加入:

*  192.30.253.112 github.com
 *  151.101.88.249 github.global.ssl.fastly.net>

\#\#\# 如果本地已经做了代理

1、关闭npm的https

npm config set strict-ssl false

2、设置npm的获取地址

npm config set registry "http://registry.npmjs.org/"

离线构建项目

###### reference: ######

[https://segmentfault.com/q/1010000005998968][https_segmentfault.com_q_1010000005998968]

# 1.下载模板 #

> 在[https://github.com/vuejs-templates/][https_github.com_vuejs-templates]  
> 下载webpack-simple 或 webpack。

> 比如: 到 [https://github.com/vuejs-templates/webpack-simple][https_github.com_vuejs-templates_webpack-simple]点Clone or Download 里的 Download ZIP

> 下个lantern或者挂vpnFQ，此处不赘述

> # 2.解压zip，放置文件夹 #
> 
> > 把解压出的文件夹放在  
> > C:\\Users\\\{your username\}\\.vue-templates  
> > 比如我的用户名是jj, 那就是  
> > C:\\Users\\jj\\.vue-templates
> 
> > # 3.离线执行vue init #
> > 
> > > 到你的project的文件夹，执行  
> > > `vue init webpack project --offline`  
> > > 或  
> > > `vue init webpack-simple project --offline`
> > 
> > > ###### 与原本指令的区别 ######
> > > 
> > > > 在于加了--offline, 于是你的vue init是用`C:\Users\{your username}\.vue-templates`内的template来生成项目的

转载于:https://www.cnblogs.com/tongbiao/p/7742537.html

[SouthEast]: /images/20210726/c8183909436a4195a5352eb567550958.png
[vue init webpack-simple project _connect ETIMEDOUT 192.30.253.112]: http://www.cnblogs.com/taiyanghua0522/p/6043942.html
[https_segmentfault.com_q_1010000005998968]: https://segmentfault.com/q/1010000005998968
[https_github.com_vuejs-templates]: https://github.com/vuejs-templates/
[https_github.com_vuejs-templates_webpack-simple]: https://github.com/vuejs-templates/webpack-simple