Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)
前言
本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpack 代码编译工具,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
webpack
官方中文文档地址:
https://www.webpackjs.com/concepts/
Vue CLI 脚手架构建工具
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,搭建交互式的项目脚手架,Vue CLI版本3.x开始包名称由vue-cli 改成了 @vue/cli, 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 卸载后再安装3.x版本,Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
安装Vue CLI
在命令行输入:cnpm install -g @vue/cli (安装新包)
我们这里推荐用vue-cli 3.x构建项目,新版优化了编译速度,不过你也可以通过老版本创建项目,老版本安装命令:cnpm install --global vue-cli
备注:安装后,检查是否安装成功 。vue -V (在此注意V为大写,也可以用vue --version)
创建一个项目
运行以下命令来创建一个新项目:
vue create hello-world
项目构建完成后,会在当前目录下创建hello-world项目文件夹。
$ cd hello-world
$ npm run serve
第一项为默认创建项目,默认的设置非常适合快速创建一个新项目的原型,这里我们选择第二项手动创建项目,按回车继续。
手动设置则提供了更多的选项,通过上下键选择所需的包按空格键选中后,按回车继续创建项目。
创建完成后我们进入hello-world目录,输入npm run serve运行项目(老版本运行命令为npm run dev)。
看到以上提示说明项目成功创建运行了,现在可以通过浏览器打开http://localhost:8080来访问我们网站了。
打开项目
我们通过Visual Studio Code工具打开项目,文件 - 打开文件夹,选中我们创建的项目hello-world
目录结构:
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ └── main.js # 入口文件 加载组件 初始化等
├──.browserslistrc # 浏览器兼容性
├── .eslintrc.js # eslint 配置项
├── babel.config.js # babel 配置项
└── package.json # package.json
目录导航
- Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
- Vue.js+vue-element搭建属于自己的后台管理模板:更深入了解Vue.js(三)
- Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)
参考资料
Vue.js