vue-cli是一个vue官方发布的项目脚手架,可以快速创建vue项目,GitHub地址是:https://github.com/vuejs/vue-cli
一、安装node.js
首先需要安装node环境,可以直接到官网(http://nodejs.cn/)下载安装包解压安装。
安装完成后,可以在命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,说明安装成功。
二、安装vue-cli
1、首先全局安装vue-cli
由于npm安装会比较慢,所以推荐使用国内的淘宝镜像cnpm来安装
命令行输入:npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完后输入 cnpm -v 显示版本号说明安装成功
接下来就可以全局安装vue-cli了。
命令行输入:cnpm install -g vue-cli
最新的vue项目模板中都带有webpack插件,所以这里可以不用安装webpack。
命令行输入vue -V(v要大写),查看是否安装成功。
三、生成项目
新建一个自己的项目文件夹,并进入到项目中,然后执行以下命令:
vue init webpack vue-project
其中webpack是模板名称,可以到vue.js的GitHub上查看更多的模板https://github.com/vuejs-templates
vue-project是自定义的项目名称,执行完命令后,会在当前目录下生成一个以该文件夹命名的项目文件夹。
配置完成后,就可以看到一个基于webpack的vue项目了。然后进入vue-project项目输入命令(cnpm install),进行依赖安装。
安装完成后会在项目中生成一个node_modules文件夹,里面是我们所需要的一些依赖。
四、启动项目
进入项目(cd vue-project),然后执行:
npm run dev
此时说明项目搭建成功了。
如果没有加载出页面,有可能是本地的8080端口被占用了,需要修改一下配置文件。在config>index.js中修改
另外我还将build的路径前缀修改为'./',因为打包之后,外部引入js和css文件时,如果以'/'开头,在本地是无法找到对应的文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。
五、项目打包
项目开发完成后,就可以通过npm run build来进行打包了。
项目上线,只需要将dist文件夹放到服务器就行了。