1.vue-cli安装
(1)安装node.js
在node.js官网中下载安装,检查是否安装完成,在cmd中输入“node -v”,若安装完成,会出现版本号。
npm包管理器是在node中集成的,安装了node.js,也就有npm,输入“npm -v”查看版本号。
(2)安装cnpm
使用淘宝镜像安装依赖,输入命令: npm install -g cnpm --registry=http://registry.npm.taobao.org
(3)安装vue-cli脚手架
运行命令: npm install -g vue-cli,等待安装完成(全局安装)
安装相应版本的vue-cli,命令:npm install -g @vue/cli@版本号
查看版本号:vue -V
(4)创建相应的项目文件
切换到相应的目录下,初始化完整版的项目:vue init webpack +项目名,同时加载webpack所依赖的包
项目创建完成,创建的项目目录如下:
2.打包上线
(1)编码测试
在相应文件目录下,运行命令:npm run dev,访问地址为:http://localhost:8080
(2)打包发布
在相应文件目录下运行:npm run build,生成本地的打包文件
React或Vue有时需要将打包好的项目跑一下看下效果,但又不能直接打开,这时可以简单使用serve工具,下载serve工具的步骤如下:
(a)安装serve
运行命令:npm i serve -g
(b)serve dist,查看即可