我的qq 2038373094
疑惑
1、vue为什么要用node.js?
2、vue为什么用webpack?
3、vue-cli脚手架又是什么?
解答
node.js是方便前后端分离的一种技术,这个一般后端的人用,因为,后端不懂前端,前端人员不懂后端,除非是全栈工程师,不然的话,无法实现前后端分离,一旦前端出错,问题很难解决!
webpack是打包工具,可以把一个个组件文件打包成js,这个样的好处是代码整洁
开始部署的第一步 node.js的安装
1、首先安装node.js
官网https://nodejs.org/en/download/
安装教程:都是直接下一步(安装位置可以变更一下)
测试是否安装成功,windows+r 输入node -v和node --version
3.安装cnpm
npm的国内镜像—cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
第二步、安装vue-di脚手架
npm install vue-cli –g
这个图是之前的,应该是npm install vue-cli -g 千万不能用cnpm,我吃了太多亏了,删文件把系统都蓝屏了
查看是否安装成功 vue -V
出现版本号就说明没有问题
第三步、安装webpack
cnpm install webpack -g
如下图所示
等待安装结束,查看是否安装成功
webpack -v
如果没有出现版本号,而是出现如下
还需要安装GLI的,输入yes,等待这个安装结束,再输入webpack -v就会出现版本号了
第四步 创建一个基于webpack模板的新项目
拿我的举个例子
通过 cmd命令,进入d盘
vue init webpack vscode 这个vscode是文件夹的名称(事先不存在的,不能是中文)
运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好
Project name (my-app) # 项目名称(我的项目)
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者(你的名字)
Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)
注:当然这些都看你自己个人的情况
第五步、运行项目 (进入到vscode 目录下)
输入命令 cnpm run dev
结束以后,会出现http地址,在浏览器上输入,出现vue的图片就是成功的!
第六步、在vscode里面打开vscode 文件夹
安装vetur
打开package.json,可以看到一大堆命令如npm run dev 说明以上配置都是没有问题的了!