Vue.js是现代前端框架中的一员,它使得构建交互式和响应式的用户界面变得更为容易。Vue.js通过自己的生命周期、单向数据流、虚拟DOM来管理应用程序状态。为了更好地管理Vue.js应用程序的状态,Vue.js开发团队放出了一个脚手架工具,它可以极大地加速Vue.js程序的开发。
使用Vue.js脚手架来构建自己的Vue.js应用程序的步骤,一些相关的命令和文件的结构:
$ npm install -g vue-cli # 安装 Vue CLI $ vue init webpack my-project # 创建一个项目 $ cd my-project # 转到项目目录 $ npm install # 安装项目依赖 $ npm run dev # 运行项目
在执行这些命令后,我们可以得到项目的基本结构,其中包含了许多目录和配置文件。
├─ build # 构建配置文件 ├─ config # 项目配置文件 ├─ node_modules # 依赖包目录 ├─ src # 应用程序代码目录 │ ├─ assets # 静态资源 │ ├─ components # 组件目录 │ ├─ router # 路由配置文件 │ ├─ store # 状态管理器目录 │ ├─ App.vue # 根组件 │ └─ main.js # 入口文件 ├─ static # 静态资源目录 ├─ test # 测试目录 ├─ .babelrc # Babel 配置文件 ├─ .editorconfig # 编辑器配置文件 ├─ .eslintignore # ESLint 忽略文件 ├─ .eslintrc.js # ESLint 配置文件 ├─ .gitignore # Git 忽略文件 ├─ index.html # 首页文件 ├─ package.json # 项目依赖文件 └─ README.md # 项目文档
现在,我们可以安心的开始使用Vue.js编写自己的应用程序了。