前端开发工具选择：Visual Studio Code；
期待：
不求精深，但求博大；
初步掌握vue开发；了解vue的特性；
梳理：
小白问题整理及解答：
（1）node.js ，npm，vue.js 之间有什么关系或联系？
答： npm install是帮助安装 vue到本地，npm install也可以安装vue的开发工具。也可以像jQuery一样自己找网站下载下来，在页面中引入。没有npm可以使用vue，vue只是一个前端框架。node.js是js的服务执行环境，前端常常借助 node帮助前端实现工程化。很多工具是基于node的，比如说webpack,grunt。
（2）webpack,grunt是做什么的？
答：webpack,grunt是前端工程化的工具，可以帮助前端完成混淆压缩，校验等工作。
搭建vscode+vue环境：
（1）安装node.js
官网下载，直接下一步安装就好；
检验是否安装成功：
1.win+R -> cmd
2.输入命令"node -v"
3.返回版本号即安装成功；
（2）安装cnmp
cmd内输入 "npm install -g cnpm –registry=http://registry.npm.taobao.org"
-----------------------------------------------------------------------------------------------------------------------------------
PS:遇到异常
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
解决办法：
npm版本降级；
1.cmd 输入 "npm -v" 查看当前 npm版本；
2.cmd 输入"npm install npm@4.6.1 -g" 安装4.6.1版本；
3.执行步骤1，查看是否安装成功，安装成功返回npm版本号为4.6.1
4.cmd 输入 "npm install -g cnpm –registry=http://registry.npm.taobao.org"
-----------------------------------------------------------------------------------------------------------------------------------
cmd 输入 "cnpm -v" 检验是否安装成功；
【返回下面提示，安装成功】
cnpm@6.0.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.4.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@8.12.0 (C:\Program Files\nodejs\node.exe)
npminstall@3.12.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Administrator\AppData\Roaming\npm
win32 x64 10.0.17134
registry=https://registry.npm.taobao.org
-----------------------------------------------------------------------------------------------------------------------------------
3.安装vue-cli
cmd 输入 "cnpm install -g vue-cli" 安装 vue-cli ；
cmd 输入 vue 检验安装是否成功；
【返回下面提示，安装成功】
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
-----------------------------------------------------------------------------------------------------------------------------------
安装vue-cli的目的：vue-cli 能帮我们搭建好我们需要的模板框架(可以理解为各种文件模板)；
4.创建项目
在 cmd 选择自己要创建工程的目录，然后 输入"vue init webpack （项目包名）";
下面会有以下提示：
? Project name my_first_vue_project //工程名
? Project description this is my first vue project. //工程描述
? Author liuxiaochuan //作者
? Vue build standalone
? Install vue-router? Yes //安装路由
? Use ESLint to lint your code? No //ESLint 语法规则约束
? 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
5.依赖
cmd 进入 项目文件夹所在路径
"cnpm install"
6.运行
cmd 进入 项目文件夹所在路径
"cnpm run dev"
网友评论