vue当然可以使用script标签引入,不需任何依赖即可按照vue的语法进行使用。但中大型商用项目中,还是建议使用工程化方式使用vue,vue提供了官方脚手架vue-cli,可以快速构建vue项目,脚手架会帮助开发者创建好建议的工程目录、引入相关依赖,利用nodejs环境为vue项目的开发提供最大化的便利。vue-cli倾向于快速构建SPA工程,实际上vue也不一定做成SPA,具体场景具体分析吧。
全局安装vue-cli脚手架:
npm i vue-cli -g
安装完成后可使用vue命令来构建vue工程。
vue常用的命令有两个:list 和 init,list将列出官方提供的vue工程模板,init将初始化一个vue工程。
在实际项目中使用的模板为webpack或webpack-simple,中小型项目可使用webpack-simple,此模板为vue初始化一个最简洁的webpack工程,中大型项目可使用webpack,此模板将为vue初始化一个完整的webpack工程。
创建一个webpack模板vue工程:
vue init webpack 工程名
创建过程中将询问工程名、作者、是否使用eslink、单元测试框架等信息,根据需要填y或n。
创建完成后,cd进入工程根目录,npm i安装package.json中的依赖。
依赖完成后,使用
npm run dev
将自动打开浏览器在8080端口上访问vue工程,实际是利用node环境创建一个express框架支撑开发环境。
创建好的webpack模板vue工程目录:
目录说明:
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试 环境变量
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录,这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据(state)
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源,不会被wabpack构建。
└── test 测试文件目录(unit&e2e)└── unit 单元测试└── e2e e2e测试框架
├── index.html 入口页面,SPA入口html
├── .babelrc ES6配置
├── .editorconfig webstorm编辑器配置
├── .eslintignore eslink语法检测忽略
├── .eslintrc.js eslink配置
├── .postcssrc.js css转换配置
├── .gitignore git忽略提交
├── .package.json npm依赖配置
├── README.md 项目说明