vue 使用 cli 工具构建项目

2019-10-17 23:16:03 浏览数 (1)

初始化项目

安装 cli 命令工具

代码语言:javascript复制
$ cnpm install -g @vue/cli @vue/cli-init
$ vue -V
3.12.0

构建一个名为 myapp 的项目

代码语言:javascript复制
$ vue init webpack myapp
? Project name myapp
? Project description A Vue.js project
? Author itshutong <2720204561@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? 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 "myapp".


# Installing project dependencies ...

启动项目

代码语言:javascript复制
$ cd myapp
$ npm run dev

项目结构介绍

代码语言:javascript复制
├── build               webpack打包相关配置文件目录
├── config              webpack打包相关配置文件目录
├── node_modules         第三方包
├── src                 项目源码(主战场)
│   ├── assets           存储静态资源,例如 css、img、fonts
│   ├── components       存储所有公共组件
│   ├── router           路由
│   ├── App.vue          单页面应用程序的根组件
│   └── main.js          程序入口,负责把根组件替换到根节点
├── static              可以放一些静态资源
│   └── .gitkeep         git提交的时候空文件夹不会提交,这个文件可以让空文件夹可以提交
├── .babelrc             配置文件,es6转es5配置文件,给 babel 编译器用的
├── .editorconfig        给编辑器看的
├── .eslintignore         给eslint代码风格校验工具使用的,用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js         给eslint代码风格校验工具使用的,用来配置代码风格校验规则
├── .gitignore           给git使用的,用来配置忽略上传的文件
├── index.html           单页面应用程序的单页
├── package.json         项目说明,用来保存依赖项等信息
├── package-lock.json     锁定第三方包的版本,以及保存包的下载地址
├── .postcssrc.js         给postcss用的,postcss类似于 less、sass 预处理器
└── README.md            项目说明文档

原文:https://www.itshutong.com/350.html

0 人点赞