DannyHoo https://cloud.tencent.com/developer/user/1113089 Danny 的专栏 https://cloud.tencent.com/developer/column/6109 订阅
一, vue.js 开发环境
二, 初始化一个 vue.JS 项目
三, vue.JS 项目打包部署
本来以为在 Mac 上搭建 vue.JS 的环境挺简单的, 谁知遇到各种问题 (可能是 RP 问题), 网上解决的方法也寥寥无几, 这里就记录下遇到的坑.
一, vue.JS 开发环境
1, 安装 brew, 这个简单, 直接执行远程脚本
/usr/bin/Ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2, 安装 Node.JS, 这一步时间可能略长 (执行时间长短也有可能跟网络有关系)
brew install Node.JS
3, 获取 Node.JS 模块安装目录访问权限
sudo chmod -R 777 /usr/local/lib/node_modules/
4, 安装淘宝镜像, 国内直接使用 NPM 的官方镜像是非常慢的, 所以这里使用淘宝 NPM 镜像
1) 更改 NPM 源:
NPM config set registry https://registry.npm.taobao.org
(2) 配置后可通过下面方式来验证是否成功, 如果显示 "https://registry.npm.taobao.org/" 则说明配置成功
NPM config get registry
(3) 然后安装淘宝的 cnpm(如果该步骤报错 "rollbackFailedOptional", 可以尝试执行步骤 4 或步骤 5, 否则跳过步骤 4 或步骤 5)
NPM install -g cnpm --registry=https://registry.npm.taobao.org
(4) 先删除原有的所有代理, 再重新安装淘宝的 cnpm
- NPM config rm proxy
- NPM config rm https-proxy
- NPM install -g cnpm --registry=https://registry.npm.taobao.org
(5) 报错 "rollbackFailedOptional", 还可能是权限问题, 用 sudo 执行:
sudo NPM install -g cnpm --registry=https://registry.npm.taobao.org
以下是安装淘宝 cnpm 成功的结果:
- MacBook-Pro:~ hu$ sudo NPM install -g cnpm --registry=https://registry.npm.taobao.org
- NPM WARN deprecated [email protected]: 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
- /usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
- + [email protected]
- added 632 packages from 843 contributors in 22.264s
5, 用淘宝的 cnpm 安装 vue
- cnpm install vue
- cnpm install --global vue-cli
到这里 vue.JS 环境就算 ok 了.
二, 初始化一个 vue.JS 项目
1, 自己创建并进入一个项目目录, 创建一个名为 VueDemo 的 vue 项目
- cd /usr/local/projects/vue/
- vue init webpack VueDemo
创建项目可能会报错 "vue-cli . Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=Parse Error", 可以尝试如下: (1) 清空 NPM 代理, 重新执行
- NPM config set proxy null
- vue init webpack VueDemo
(2) 或者 sudo 执行 (webpack 是构建工具, 也就是整个项目是基于 webpack 的)
sudo vue init webpack VueDemo
创建项目成功的结果:
- ? Project name VueDemo
- ? Project description A Vue.JS project
- ? Author danny <[email protected]>
- ? Vue build standalone
- ? Install vue-router? Yes
- ? Use ESLint to lint your code? Yes
- ? Pick an ESLint preset Standard
- ? Set up unit tests Yes
- ? Pick a test runner jest
- ? Setup e2e tests with Nightwatch? Yes
- ? Should we run `npm install` for you after the project has been created? (recommended) no
- vue-cli . Generated "VueDemo".
- # Project initialization finished!
- # ========================
- To get started:
- cd vue-demo-01
- NPM install (or if using yarn: yarn)
- NPM run lint -- --fix (or for yarn: yarn run lint --fix)
- NPM run dev
- Documentation can be found at https://vuejs-templates.github.io/webpack
2, 启动项目 (1) 安装项目依赖, 启动项目需要先安装项目所需依赖, 就跟 java 的 maven 项目需要先更新 dependencies 一样, 具体项目都依赖了什么, 在项目根目录下 package.JSON 中的 devDependencies 标签下可以看到
- cd /usr/local/projects/vue/VueDemo
- sudo cnpm install
在 Mac 下, 有些项目执行 install 时可能会报错 "libtool: unrecognized option `-static'", 解决方法: 在~/.bash_profile 中添加 "PATH="/Library/Developer/CommandLineTools/usr/bin:$PATH", 再重新打开一个终端, 重新运行 install 命令.
安装成功之后, 项目根目录会多出一个 node_modules 文件夹, 这里边就是项目需要的依赖包资源 (文件挺多的).
(2) 运行项目, 用热加载的方式启动项目, 在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果.
cnpm run dev
启动成功的结果:
- > [email protected] dev /usr/local/projects/vue/VueDemo
- > webpack-dev-server --inline --progress --config build/webpack.dev.conf.JS
- 95% emitting
DONE Compiled successfully in 3084ms 下午 10:58:20
I Your application is running here: http://localhost:8080
打开 http://localhost:8080 就是 vue 默认的模板
对于用惯了 idea 的同学可能想在 idea 中开发 vue,idea 配置 vue 开发环境网上有很多教程, 这里就不重复了, 随便贴一篇: https://www.cnblogs.com/phpdragon/p/7216994.html.
三, vue.JS 项目打包部署
当 vue.JS 项目开发完成需要部署时, 先打包, 再部署. 1, 打包 在项目目录下, 执行
cnpm run build
执行完之后, 项目根目录会出现一个 dist 文件夹, 里面有一个 index.HTML, 直接打开就可以看到页面效果.
2, 部署 上面步骤, dist 就是打好的包, 可以直接把 dist 部署在 nginx 等服务器下, 以 nginx 为例, 把 nginx.conf 中的 location 指向 dist 文件夹, 就可以了.
- server {
- listen 80;
- server_name 127.0.0.1;
- location / {
- root /data/delploy/dist/;
- index index.HTML index.htm;
- }
- }
安装 brew
Git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && Git checkout `git describe --abbrev=0 --tags`
如果报错就切换到指定的文件夹下进行操作
- # 报错信息
- curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection
报错版本不一致:
- vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
- You may want to run the following to upgrade to Vue CLI 3:
- NPM uninstall -g vue-cli
- NPM install -g @vue/cli
- # 使用
- sudo+NPM uninstall -g vue-cli
- sudo + NPM install -g @vue/cli
分别执行
来源: http://www.bubuko.com/infodetail-3344909.html