vue是当前比较流行的前端框架之一,被很多大公司所使用,学会使用它将会使我们的前端开发变得更加高效。这里简单介绍一下通过vue-cli(俗称“脚手架”)创建vue项目的步骤。
一、环境搭建
- 在电脑上安装nodejs.
- 检查node和npm的版本,更新npm版本
node -v //查看node版本
npm -v //查看npm版本
//如果不是最新版本,可以运行如下指令
npm install -g npm
- 使用淘宝npm镜像,cnpm
//当npm速度很慢时,可以考虑使用cnpm命令安装模块
//安装cnpm的指令
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装vue-cli,有了这个才能创建vue基本项目
cnpm install vue-cli -g //全局安装vue-cli
vue list //检查vue-cli是否安装成功
二、创建项目
按照步骤一搭建完环境之后就可以开始创建项目了
- 打开命令行,进入要创建项目的文件夹
- 命令行输入如下命令
//在当前文件夹下生成该项目名称的vue项目文件夹
vue init webpack "项目名称"
- 进行一些选择
输入命令后会出现一系列的选项,是关于vue项目的一些配置,推荐使用如下选择
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name myvue
? Project description my first vue project
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No //以下三处选择No会避免一些警告
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "myvue".
这样一个vue基础项目就创建完毕啦。
三、开发和运行
项目创建完毕后就可以用开发工具打开进行开发了,那么如何在开发状态下查看运行效果呢?
方法如下,以下命令需要进入项目文件夹后操作
- 首先安装依赖,一些和运行项目相关的依赖通过这个命令安装
npm install //安装依赖有时候不成功可以换成cnpm或者再试一遍
- 启动项目
npm run dev //这样就可以启动了
四、目录结构
build //构建相关
config //配置相关,启动端口号等配置
node_modules //下载的模块
src //编写的源码
assets //存放一些资源
components //存放组件(vue文件),主要开发的地方
static //静态资源目录,CSS,js,图片
五、打包
//打包生成dist文件夹,将这个文件夹直接部署到服务器上即可
npm run build
当然,如果直接这样打包部署后应该是访问不了的。这里有一个坑,就是要修改项目config文件夹下index.js中的build的配置。将build中的assetsPublicPath的值原本是"/",修改成"./",如下。修改之后打包就没问题了。
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
......