前言
从后端转到前端开始学习vue，这期间走过了很多的弯路，很多初学者应该有和我一样的经历，买了一本书，然后照着书上的一步步做，结果写到最后发现一堆错误！什么webpack版本问题，很多插件或者工具已经移除或者改变了写法！特别是初次接触webpack的时候，那叫一个头疼，还简单的把自己在使用webpack搭建开发环境的时候所遇到的一些问题做了一个简单记录（所谓的踩坑其实是自己对前端一些构建工具的不熟悉，我的目的是学习vue，暂时先绕开这些构建工具，使用vuecli搭建一个学习环境！）
node安装
1.根据自己的操作系统安装node环境
2.安装完node后可以通过以下两个命令查看node和npm的版本
- node -v 查看node版本
-
npm -v 查看npm的版本
npm 的一些常用命令
- 查看全局包位置
npm root -g - 修改全局包位置
npm config set prefix '目标目录' - 查看修改结果
npm config set prefix - 全局卸载包
npm uninstall -g 包名 - 查看npm 版本
npm -v - 全局安装更新npm到新版本
npm install npm -g - 配置镜像站（ 国外的经常被墙，所以建议更换）
npm config set registry=http://registry.npm.taobao.org - 查看npm配置信息
npm config list
开发工具我们推荐vscode
vscode中推荐安装以下插件，具体的插件看说明应该就能了解
- Vetur
- Vue 2 Snippets
- eslint
- Auto Close Tag
- Auto Rename Tag
修改vscode的设置
{
"vetur.validation.template": false,
"window.zoomLevel": 0,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"eslint.autoFixOnSave":true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"tslint.autoFixOnSave": true,
"explorer.confirmDelete": false,
"gitlens.advanced.messages": {
"suppressShowKeyBindingsNotice": true
},
"git.ignoreMissingGitWarning": true,
"git.autofetch": true,
"workbench.iconTheme": "vscode-icons"
}
全局安装vue cli工具
- npm install @vue/cli -g
（Mac 如果遇到权限问题需要执行sudo npm install @vue/cli -g) -
vue -V 查看 安装的版本
-
在命令行运行 vue ui
vue cli 脚手架页面
接下来的操作就简单了
-
输入项目名称、选择包管理工具
直接创建项目不保存预设
-
项目的运行依赖、开发依赖
image.png -
这里需要注意公共路径，涉及到最后项目打包上线的地址比如我们打包发布到服务的80 端口下面的myapp文件夹，需要把这个也该成对应的，否则发布过后会导致很多资源文件路径不对
-
npm run build 打包项目查看生产的项目
打包后的示例 -
npm run server 运行项目
到此我们已经基本搭建了一个vue的学习环境，接下来就是先看一篇vue的官方文档下面给出相关链接！
