Vue.js安装以及创建项目

﹏ヽ暗。殇╰゛Y 2021-09-14 01:10 457阅读 0赞

# 一.安装Vue.js #

怎么搭建vue.js的环境呢？要搭建vue的环境需要借助node.js的npm的包管理器，所以先去看下[NodeJS、NPM安装配置步骤][NodeJS_NPM]。

（1）.安装淘宝的npm镜像（可安装可不安装）：

如果在cmd中直接使用npm来安装的一些工具的话会比较慢，所以我们使用淘宝的npm镜像：   
输入npm install -g cnpm –registry=[https://registry.npm.taobao.org][https_registry.npm.taobao.org]，即可安装npm镜像。这个其实看个人爱好吧，因为npm在国内下载速度是很慢，所以就用npm下载安装cnpm可以更快的下载后面的依赖等等。

（2）.安装全局vue-cli脚手架、webpack：之所以要用vue-cli，是应为这个工具能帮我们搭建好我们需要的模板框架，比较简单

命令输入(--global这个可以简写成-g)

1.npm install -g vue-cli                       //全局安装vue-cli

![20170725102944457][]

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

![20170725103253282][]

3.npm install -g webpack-dev-server             //安装webpack的本地webserver

![20170725104018805][]  
                注意：如果装了安装淘宝的npm镜像时就把命令中npm换成cnpm

安装完成后，vue-cli脚手架其实就已经把vue也装掉了，所以只需输入vue -V 和 webpack  -v  等等就可以查看安装成功与否。

![20170725104302235][]

![20170726091221888][]

# 二.创建项目 #

## 1.开始创建一个新项目 ##

命令 :   vue init webpack myVue(最后这个是我创建的项目文件夹的名字)

（1）输入vue init webpack myVue

![20170725172642879][]

（2）回车并回答如下问题，直到最后创建完成，

![20170726085838677][]

(3).一个vue项目自动创建成功，可到对应的项目存放路径中查看

![20170726090044021][]

# 三.运行项目 #

想要运行此项目，还需要装依赖文件node\_modules

1.安装依赖，生成node\_modules目录（安装依赖的代码库）

①注意前面的盘符是当前的，然后命令cd myVue    //进入文件夹  
②回车输入  npm install   你会发现在已经创建的项目结构里面会多出一个node\_modules的文件夹，里面就是刚才安装的所有依赖。

![20170726091503741][]  
  
2.运行项目

准备工作做好以后，测试一下项目里面默认的app.vue模块能否跑起来，这是需要先安装一下服务器环境，在命令行中输入  npm run dev 回车即可

运行”npm run dev”的时候执行的是build/dev-server.js文件，运行”npm run build”的时候执行（用来执行发布的）的是build/build.js文件，我们可以从这两个文件开始进行代码阅读分析

![20170726091741965][]

8080就是默认的端口，在浏览器地址栏中输入localhost:8080会发现默认的模块打开了！最后打开浏览器:127.0.0.1:8080出现下面这个就代表vue.js在本地就创建好了。

![20170726092153677][]

# 四.打包vue项目 #

打包就简单多了，直接输入 npm run build 就行了，打包后成功的文件，默认是存放在dist文件夹中，只需将此文件夹放入服务器即可

![20170726092801599][]

![20170726092924282][]

# 五.运行别人的vue.js项目domo #

1.可以从github克隆下来，然后将项目文件夹放到某个盘符下(在这里我把官网的demo放在Vuedemo)

![20170726153216232][]

2.然后cmd命令 找到该盘符，找到文件 f:\\cd Vuedemo

![20170726153525319][]

3.命令 npm  install    //在本地安装

最后  npm run dev   回车   //在本地的浏览器打开127.0.0.1带上端口号就可以跑起来了。

![20170726153556458][]

![20170726153754044][]

[NodeJS_NPM]: http://blog.csdn.net/gao_xu_520/article/details/75243384
[https_registry.npm.taobao.org]: https://registry.npm.taobao.org/
[20170725102944457]: /images/20210813/a4dd6e90e4384d8f816cc3f82aa7b58b.png
[20170725103253282]: /images/20210813/8976fd9203c64afcb90eb5618ce2da46.png
[20170725104018805]: /images/20210813/90f6fa381f2f45b792e1dc77d37d099c.png
[20170725104302235]: /images/20210813/f2a81c23bc304bbf8edda822117ecc9c.png
[20170726091221888]: /images/20210813/b1cfb55816d34eee9ed2373bbb39a74c.png
[20170725172642879]: /images/20210813/590174a0ef3946b599882866613e70fc.png
[20170726085838677]: /images/20210813/2d895340135448a3ac5e264e71adada7.png
[20170726090044021]: /images/20210813/d5014d54271e4b579a3c569797570e62.png
[20170726091503741]: /images/20210813/2785a8e689cf4df0a006f779d027265c.png
[20170726091741965]: /images/20210813/068ed6a9e1834f7dadda9d8a2f9bebc9.png
[20170726092153677]: /images/20210813/9a7477ee131c412993f2f3ded5c3b894.png
[20170726092801599]: /images/20210813/87019f745d09437d8e613a230e5a16f7.png
[20170726092924282]: /images/20210813/e8fa5c97456d4a4fbe6486e215bdb031.png
[20170726153216232]: /images/20210813/8bd402c4687f4fdb8f70d7cebbd74d2f.png
[20170726153525319]: /images/20210813/652087e4ad534df288ea97441c7810c0.png
[20170726153556458]: /images/20210813/c29203bdeafe4d329d3c6bcbf6e0726e.png
[20170726153754044]: /images/20210813/94fb5bcdb4bc4413bec8751eae1d8511.png