npm构建vue项目

环境搭建

我们需要先从node.js官网安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。
安装完成之后，打开命令行工具（Mac打开终端），输入 node -v，如图，如果出现相应的版本号，则说明安装成功。

 

node -v

那么此时你发现你不仅拥有了node环境而且还有了npm包管理器，岂不快哉！

安装vue-cli脚手架构建工具

在命令行中运行命令 npm install vue-cli -g ，然后等待安装完成。(这里不建议使用cnpm，据说使用cnpm安装有几率会出现一些诡异的东西，可以在命令后面加-- registry=https://registry.npm.taobao.org)

 

npm install vue-cli -g

完成以上两步之后，我们需要准备的环境和工具都准备好了，接下来就可以开始使用vue-cli来构建项目了。

使用vue-cli脚手架构建项目

要创建项目，首先我们要创建一个空目录，然后在命令行中cd进去这个目录，然后在命令行中运行命令 vue init webpack first-vue 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中first-vue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在你刚创建的目录里）

 

vue init webpack first-vue

运行初始化命令的时候会让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。如下图

 

没错，我叫下图

接下来我们打开我们打开first-vue文件夹：

 

first-vue文件夹

这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，接下来我们需要安装依赖资源。首先cd到项目文件夹（first-vue文件夹），然后运行命令 npm install ，等待安装。

 

npm install

安装完成之后，会在我们的项目目录first-vue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。安装完依赖包之后，就可以运行整个项目了。

“跑”起来

在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

 

npm run dev

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

 

 

作者：IT散人
链接：https://www.jianshu.com/p/7ee3b532428c