vue-cli入门
最后更新于:2022-04-02 05:34:22
## 前言
使用vue开发大型项目时,需要考虑到目录结构、项目构建以及部署、热加载、代码单元化测试等事情,如果手动完成这些,效率非常低,一般情况下我们使用脚手架完成这样的工作。在vuejs的生态中,我们可以使用vue-cli来快速的构建项目。
## 安装
* 全局安装
`cnpm i vue-cli -g`
* 安装成功可以查看版本
`vue -V`
## 基本使用
* 使用vue-cli来快速生成webpack构建的项目。之后会陆续完成一些项目基本信息的设置(项目名称,描述,作者,eslint检查,单元测试,e2e测试等)
`vue init webpack my-project`
* 生成之后的默认的项目结构
* 项目初始化之后完成安装依赖,运行项目,访问localhost:8080即可,作为常识要知道所有的spa应用都是路径带/#/ 的。
`cnpm i `
`cnpm run dev `
* 去除eslint的默认代码格式校验
/build/webpack.base.config.js 的文件中,找到如下代码验证的部分,然后注释掉;或者在将不想进行校验的文件就想上面一样创建一个ignore_lib,然后全部丢进去。
~~~
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
exclude: [/node_modules/, /ignore_lib/]
options: {
formatter: require('eslint-friendly-formatter')
}
}
~~~
';