一、部署环境
1.安装nodeJS -- 地址:https://nodejs.org/zh-cn/
2.安装vue脚手架 (用于创建VUE项目的)
进入项目文件或者新建一个文件
npm install vue-cli -g
3.根据模板创建项目
vue init webpack dome(工程名称)工程名字<工程名字不能用中文>
*备注(Use Eslint to lint your code -------- n) --是是否开启严格模式
4.初始化安装项目依赖
npm install
*备注:如果报错请 重新初始化 ,(不推荐使用淘宝镜像,在博客最后面附淘宝镜像安装方法)
5.启动项目
npm run dev
二、项目编写完成--部署服务器
1.打包---npm run build 在项目中生成 dist文件--里面就是打包的 项目文件
注意:修改项目目录下的 config 文件夹里的 index.js 文件中的 build 对象,将 assetsPublicPath 中的 “/” ,改为 “./” 即可
*备注:静态文件资源是相对于当前的路径
2.打包完成,把 dist放在服务器即可
3.如何控制打包体积过大
(1).1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,
打包后文件体积可以减少百分之八十!!!!!!!
*备注:npm run analyz 查看项目中用到了那些文件
备注:淘宝镜像安装:
命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org;
注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
扩展:
临时使用: npm --registry https://registry.npm.taobao.org install express
持久使用: npm config set registry https://registry.npm.taobao.org
通过cnpm使用: npm install -g cnpm --registry=https://registry.npm.taobao.org