开始项目前
先在 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 账号作为作者的
image.PNG
然后是选择 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 项目基本搭建完成
来源: http://www.jianshu.com/p/b226d7ea5275