npm 构建 vue 项目

环境搭建

我们需要先从 node.js 官网安装 node,安装过程很简单,一路“下一步”就可以了

安装完成之后,打开命令行工具(Mac 打开终端),输入 node -v,如果出现相应的版本号,则说明安装成功

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

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

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

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

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

vue init webpack first-vue

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

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

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

npm install

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

项目运行

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

npm run dev

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

请成为永远疯狂永远浪漫永远清澈的存在。

留下你的脚步
推荐阅读