使用vuecli可以快速创建vue项目

vue-cli 是一个官方发布 vue.js 项目脚手架&＃xff0c;使用 vue-cli 可以快速创建 vue 项目&＃xff0c;GitHub地址是&＃xff1a;https://github.com/vuejs/vue-cli

一、 安装 Node.js

首先需要安装node环境&＃xff0c;可以直接到中文官网http://nodejs.cn/下载安装包。

安装完成后&＃xff0c;可以命令行工具中输入 node -v 和 npm -v&＃xff0c;如果能显示出版本号&＃xff0c;就说明安装成功。

二、安装 vue-cli

安装好了 node&＃xff0c;我们可以直接全局安装 vue-cli&＃xff1a;

npm install -g vue-cli

但是这种安装方式比较慢&＃xff0c;推荐使用国内镜像来安装&＃xff0c;所以我们先设置 cnpm&＃xff1a;

如果安装失败&＃xff0c;可以使用 npm cache clean 清理缓存&＃xff0c;然后再重新安装。后面的安装过程中&＃xff0c;如有安装失败的情况&＃xff0c;也需要先清理缓存

同样可以使用 cnpm -v 查看是否安装成功

然后使用 cnpm 安装 vue-cli 和 webpack

最新的 vue 项目模板中&＃xff0c;都带有 webpack 插件&＃xff0c;所以这里可以不安装 webpack

安装完成后&＃xff0c;可以使用 vue -V &＃xff08;注意 V 大写&＃xff09;查看是否安装成功。

如果提示“无法识别 &＃39;vue&＃39; ” &＃xff0c;有可能是 npm 版本过低&＃xff0c;可以使用 npm install -g npm 来更新版本

三、生成项目

首先需要在命令行中进入到项目目录&＃xff0c;然后输入&＃xff1a;

其中 webpack 是模板名称&＃xff0c;可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

Vue-Project 是自定义的项目名称&＃xff0c;命令执行之后&＃xff0c;会在当前目录生成一个以该名称命名的项目文件夹

配置完成后&＃xff0c;可以看到目录下多出了一个项目文件夹&＃xff0c;里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

然后进入项目目录&＃xff08;cd Vue-Project&＃xff09;&＃xff0c;使用 cnpm 安装依赖

然后启动项目

如果浏览器打开之后&＃xff0c;没有加载出页面&＃xff0c;有可能是本地的 8080 端口被占用&＃xff0c;需要修改一下配置文件 config>index.js

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 &＃39; ./ &＃39;&＃xff08;原本为 &＃39; / &＃39;&＃xff09;&＃xff0c;是因为打包之后&＃xff0c;外部引入 js 和 css 文件时&＃xff0c;如果路径以 &＃39; / &＃39; 开头&＃xff0c;在本地是无法找到对应文件的&＃xff08;服务器上没问题&＃xff09;。所以如果需要在本地打开打包后的文件&＃xff0c;就得修改文件路径。

四、打包上线

自己的项目文件都需要放到 src 文件夹下

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

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

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