vue开发环境部署,以及构建运行项目说明:
windows安装步骤:
一.安装node.js
说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具。
node.js的官方地址为:https://nodejs.org/en/download/,如下图所示:
根据自己电脑的具体配置,选择你要下载的安装包。
二.设置global和cache路径
说明:设置路径能够把通过npm安装的模块集中在一起,便于管理。
- 在nodejs的安装目录下,新建node_global和node_cache两个文件夹,作者的安装目录为“D:\Program Files\nodejs\”
- 设置global和cache
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
3. 设置成功后,后续用命令npm install XXX -g安装以后模块就在D:\Program Files\nodejs\node_global\node_modules里(不是新建的)
三、安装cnpm
说明:由于许多npm包都是在国外,我们这里用到淘宝的镜像服务器,来对我们依赖的module进行安装,因此首先安装“中国的npm”——cnpm
参考网址如下:http://npm.taobao.org/
安装命令为:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装时出错:
需要删除npmrc文件。清理缓存
强调:不是nodejs安装目录npm模块下的那个npmrc文件
而是在C:\Users\{账户}\下的.npmrc文件..
安装成功:
四、设置环境变量(非常重要)
说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径
1.鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。
2.点击环境变量弹出下列对话框:
3.修改用户变量PATH:
选中PATH,点击编辑,在已有的变量后面,加入英文的";",然后把“D:\Program Files\nodejs\node_global”加到后面
其实就是添加路径吧:
4.新增系统变量NODE_PATH:
在下面的系统变量中点击新建,弹出下框,把变量值设置成“D:\Program Files\nodejs\node_global\node_modules”
五、用cnpm安装vue
cnpm install vue -g
安装成功:
六、安装vue命令行工具
cnpm install -g @vue/cli
安装成
七、创建工程
- 用cd命令来到你将要新建工程的目录,执行 vue create mytest
不要自己傻乎乎在文件夹创建一个文件目录
创建时面临的选择:用镜像 默认配置
2.定位到mytest的工程目录下
cd mytest
3.安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules
cnpm install
安装依赖成功:
4.运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。
npm run serve
开发结构没有经过优化,使用浏览器运行:
查看是否成功安装vue :
但是安装完的文件目录里面没有build 等重要的文件,文件缺失十分严重。
重新用旧方式安装:
- 全局安装桥接工具:npm i -g @vue/cli-init
- 安装工程项目目录:vue init webpack (vue_project)
自主选择Y
八、部署
- build前的配置,防止js、css文件路径错误,在build目录下面找到 webpack.prod.conf.js 文件,找到 output 节点,添加 [ publicPath:'./' ]
2.执行命令 npm run build build 项目:在demo(mytest)项目的根目录下
3. 在根目录下会生成dist目录,里面的内容就是构建的结果
4. 将构建结果dist目录下面的内容放在nginx的发布目录下即可访问
------------------------------------------------------------------------------------------------------
MAC安装步骤:
一、安装brew
打开终端运行以下命令:(复制下面的代码在终端,再回车)
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装成功后,查看一下brew的版本信息:(如果有提示版本号说明安装成功)
brew -v
二、安装node.js
在终端直接运行下面指令,然后等待安装
brew install nodejs
安装完成后输入下面指令检测看看是否安装成功:(有检测到版本号说明成功,直接下一步)
node -v
获取nodejs模块安装目录访问权限
sudo chmod -R 777 /usr/local/lib/node_modules/
三.安装cnpm (淘宝镜像)
npm install -g cnpm --registry=https://registry.npm.taobao.org
四、安装webpack
npm install webpack -g
五、安装vue-cli
cnpm install -g @vue/cli
到这里就搭建好了vue开发环境
六、创建一个vue工程
先指定一个目录来存放你要创建到工程,然后cd到该目录
vue create mytest
然后cd进入到你刚建到工程目录里
安装项目依赖
cnpm install
七、启动项目
npm run serve
然后就可以在浏览器打开输入http://localhost:8080打开该项目
八、部署项目
跟上述windows一样操作
------------------------------------------------------------------------------------------------------
克隆远程项目,本地运行步骤:
- 使用git clone命令把远程仓库代码克隆到本地
- 进入项目根目录,运行cnpm install 命令 安装所需依赖
依赖安装好了:
- 以本项目为例,可以修改lib目录中interface.js文件中的的api地址。
本地联调,修改本地服务器的地址:
运行npm run serve 即可启动项目。
部署成功:呈现网站首页
注意:需要部署新的vue项目的时候,先 在根目录cnpm install安装依赖;
修改vue.conf文件里面的域名 端口号 api,后台的数据就会覆盖前面写死的数据,直接运行npm run serve