开始项目前
先在cmd或者git运行node -v和npm -v确认node和npm已安装并确认版本较新
安装vue-cli(vue脚手架)
国内使用npm速度慢的话,可以使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装淘宝镜像,之后只要使用cnpm就可以了
然后安装vue-clicnpm install -g vue-cli
安装完成后运行vue -h来确认已经成功安装
初始化webpack项目模板
输入vue init webpack初始化webpack项目模板,离线环境使用vue init webpack --offline初始化
然后会提示输入项目名字不能使用中文名
这里使用mall作为名字,接下来是项目描述,可以使用中文
然后是Author(作者),本文这里是默认使用github账号作为作者的
然后是选择vue bulid(生产环境),可以根据需要选择,第一项是运行环境+编译器,第二项是只有编译器,大多数项目都可使用第一项,第二项的好处就是只有6kb,并且只能用vue文件来编写
然后会问你要不要安装router路由，这个必须装，除非使用第三方路由
后面会依次出现
是否使用ESLint、是否安装党员测试是否安装e2e tests，可以根据需要安装，本文这里都安装
最后会问你要不要安装依赖包，国内网速慢的小伙伴可以不安装，回头用cnpm安装，本文用cnpm安装就不使用npm安装了，接下来使用cnpm安装cnpm install
自此,vue项目和npm依赖包安装完毕
配置eslint
ESLint是可组装的JavaScript和JSX检查工具,使得代码编写必须符合锁规定的代码规范才能通过编译,可以帮助我们更好的规范团队开发的代码,便于维护,有关eslint的详细规则可以参考https://cn.eslint.org/docs/rules/
这里只贴出本人的配置:
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'semi': ['error','always'],
'indent': 'off',
'vue/script-indent': ['error', 2, {'baseIndent': 1}],
'space-before-function-paren': ['error', {'anonymous': 'always', 'named': 'never', 'asyncArrow': 'always'}]
}
}
配置webpack使得移动端可访问
将config/index.js中找到host,将其默认的'localhost'修改成'0.0.0.0',全零网络代指计算机在网络中的位置,详细可了解全零网络IP地址0.0.0.0表示意义详谈
配置后是无法通过0.0.0.0:8080/#/访问到项目页面的,需要将0.0.0.0修改成自己的ip地址
自此,一个vue项目基本搭建完成
如有帮助,欢迎点赞收藏,您的支持是我最大的动力