vue-cli脚手架构建项目

淺唱寂寞╮ 提交于 2020-03-03 13:50:00

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。

一、安装node.js

二、安装vue-cli

npm install -g vue-cli

三、生成项目

vue init < template-name >  < project-name >

template-name为生成项目使用的模板,可以运行vue list查看所有可用的官方模板。

例如:
vue init webpack my-project

命令输入后,会进入安装阶段,需要用户输入一些信息。

  • Install vue-router   是否安装vue-router
  • Use ESLint to lint your code 是否使用ESLint管理代码
  • Set up unit tests  是否安装单元测试

四、运行

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

进入项目目录,安装依赖。

npm install

项目目录结构如下:

.
├── build/                      # 构建脚本目录(npm run *)
│   └── ...
├── config/             
│   ├── index.js                # 项目配置文件
│   └── ...
├── src/              
│   ├── main.js                 # 入口js
│   ├── App.vue                 # 根组件
│   ├── components/             # 公共组件
│   │   └── ...|   |—— router/                 # 前端路由             |   |   |_ ...
│   └── assets/                 # 资源文件
│       └── ...
├── static/                     # 纯静态资源
├── index.html                  # 入口页面
└── package.json                # 依赖

然后启动项目:

npm run dev

启动成功如下,浏览器中打开运行

五、打包上线

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

项目开发完成之后,运行下面命令打包:

npm run build

打包完成后,会生成 dist 文件夹,只需要将 dist 文件夹放到服务器就行了。

 

官方文档:https://github.com/vuejs/vue-cli

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!