搭建vue项目开发环境

162 阅读1分钟

1.安装nodejs

  • 前往 nodejs.org 安装nodejs
  • 注意系统是32位还是64位的,选择对应的版本
  • 安装过程很简单,都是直接下一步。

2. 配置本地npm私服地址跟网络代理

公司如果不能直接连到互联网的话,就需要这步操作。

  • 一种方法是直接在终端直接配置
npm set registry=http://172.16.XXX.XXX:8081/repository/npm_all/
npm set proxy=http://192.168.XXX.XXX:8082/
  • 另一种方法:
    • 1.在用户根目录建立.npmrc文本文件C:\Users\用户名\.npmrc
    • 2.在.npmrc文件里面写入下面配置:
registry=http://172.16.104.XXX:8081/repository/npm_all/
proxy=http://172.16.104.XXX:808

3. 全局安装python

去 python 官网下载 python2.7 并安装。(此步骤根据需要操作)

4. 项目中安装sass

4.1 根据node版本选择不同的sass版本

  • 在终端运行如下命令,获取对应的node-sass 版本
node -p "[process.platform, process.arch, process.versions.modules].join('-')"

  • 然后根据版本号去选择对应的版本下载:

github.com/sass/node-s…

4.2 设置node_sass的安装路径

npm set SASS_BINARY_PATH=c:/win32-x64-72_binding.node(本地地址)

4.3 在开发环境下安装

npm install node-sass --save-dev

5. 项目运行命令

npm run dev//启动开发环境
npm run build//打包到生产环境
npm run upload//组件上传到npm

6. 项目结构

7. 设置多个私服仓库切换

npm install -g nrm //安装nrm
nrm add npm http://172.16.104.XXX:8081/repository/npm_all/ (npm仓库)
nrm add npm_local http://172.16.XXX.52:8081/repository/npm_local/ (本地仓库)

nrm use npm_local//切换本地仓库
nrm use npm //切换到npm仓库

8. 组件上传npm_local私服

1)在src/components/index.js这个文件配置。(每个组件的name不能重复)

2)登录私服(没登录过的需要,登录后就不需要了)

npm login –registry=http://172.16.104.52:8081/repository/npm_local/
账号:admin
密码:admin123

3) 上传组件

   npm publish -registry http://172.16.104.52:8081/repository/npm_local/

4)更新组件

需要更改package.json文件的版本即可

5)组件使用