Vue.js 中使用vue-cli如何初始化项目？

本文和大家分享的主要是vue.js 中使用vue-cli 初始化项目相关内容，一起来看看吧，希望对大家学习前端有所帮助。

　　一、安装步骤

　　 step1、安装Node.js

　　首先需要下载并安装Node.js ，下载地址： Node 官网。

　　可查看我的另外一篇文章，仅作参考：Node.js 入门及安装

　　测试安装是否成功，打开cmd ，使用 node -v ，如果显示版本号则表示安装成功。

　 step2、安装vue-cli

　　使用vue-cli （脚手架）搭建项目， vue-cli 是 Vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具。

　　GitHub 地址： vue-cli

　　全局安装：-g 表示全局安装 vue-cli

　　 npm install -g vue-cli

　　如果安装较慢，可以使用淘宝镜像安装。

　　 cnpm install -g vue-cli

　　 step3、初始化项目

初始化基于webpack 的模板项目， projectName 为项目名称，可以自动生成目录及相关文件，跟 express 生成器差不多。

　　 vue init webpack projectName

　　在初始化的过程中会询问一些相关的说明和配置，这些说明和配置会写入package.json 文件中，会自动生成对应的模块。

　如果需要使用ESLint 规范和相关的 unit test 和 e2e ，请输入 yes ，这样初始化出来的项目，会自动配置好对应的模块。

　　 step4、下载项目依赖模块

　　定位到项目根目录，下载项目依赖的所有模块。

　　 npm install

　 step5、运行项目

　　定位到项目根目录下，使用命令：

　　npm run dev

　　使用命令运行项目，在浏览器中输入 http://localhost:8080 可访问。

　整体过程：

　　# 全局安装 vue-clinpm install -g vue-cli

　　# 创建一个基于 webpack 模板的新项目

　　vue init webpack projectName

　　# 安装依赖，先定位到项目根目录，然后安装

　　cd projectNamenpm install

　　# 运行项目 npm run dev

　　二、目录说明

　　项目文件需要放到 src 文件夹下，相关的部分静态资源需要放在 static 文件夹下。

　　项目开发完成之后，可以输入 npm run build 来进行打包工作

　　npm run build

　　打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看

　　项目上线时，只需要将 dist 文件夹放到服务器就行了。

QQ截图20170409201551.png (61.4 KB, 下载次数: 0)

1 分钟前上传

来源：网络