MacOS

各种安装

2019-03-21  本文已影响0人  _码奴

MAC下安装Homebrew

MAC下安装Home brew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew使用

Homebrew使用没啥好说的了，常用的

搜索软件：brew search 软件名，如brew search wget

安装软件：brew install 软件名，如brew install wget

卸载软件：brew remove 软件名，如brew remove wget

万一你用的不爽了,卸载指令:

cd `brew –prefix`

rm -rf Cellar

brew prune 

rm `git ls-files` 

rm -rf Library .git .gitignore bin/brew

rm  -rf [README.md](http://readme.md/) share/man/man1/brew

rm -rf Library/Homebrew Library/Aliases 

rm -rf Library/Formula Library/Contributions

rm -rf ~/Library/Caches/Homebrew

其他指令：
brew list —列出已安装的软件

brew update —更新Homebrew

brew -h brew —帮助

删除程序单个软件删除和所有程序老版删除。

brew cleanup git
brew cleanup

查看那些已安装的程序需要更新

brew outdated

其他命令网上百度。

Mac 安装node.js

安装了Homebrew 之后十分简单，终端执行下面的命令：
brew install node
安装完成使用 node -v 查看版本，打印出版本信息，说明安装成功

MAC 下安装 VUX

快速安装指令：

npm install vue-cli -g # 如果还没安装

检查是否安装成功
# 创建项目
cd 自定义的项目目录下(随便创建一个文件夹就好)
# 创建项目
vue init airyland/vux2 项目名称
# 进入项目文件夹
cd 项目文件夹
# 第一次安装执行下面命令
npm install --registry=https://registry.npm.taobao.org # 或者 cnpm install 或者  yarn
# 运行看看能否跑起来
npm run dev #  或者  yarn dev

如果运行成功，会出现：
Your application is running here：http://localhost:端口号  
之后在浏览器中访问这个服务器地址看是否成功，成功说明安装完成，项目创建成功

Cordova 安装

安装过node之后安装cordocva 特别简单：
npm install -g cordova
输入上面指令就可安装，安装完成后 cordova -v 查看版本，打印出版本信息，说明安装成功

Corvoda 创建项目

使用 cd 命令 切换到准备创建项目的文件夹下执行下面命令:
cordova create 项目包名

创建成功会看到工程文件目录为：


1553158973609.jpg

这里重点注意“platforms” 和 “www” 文件夹，（vux 文件夹是我手动创建，方vue项目，方便vux和cordova工程管理），“www” 文件夹是我们存放我们的html、css、js 文件的，“platforms” 是用来存放Cordova 自动打包的 各个平台 代码的，刚创建完项目时他是空的，我们需要手动添加平台内容

在platforms 添加相应平台：
注意一点：执行添加平台命令时要cd 到项目根目录下，否者会包找不到platforms 文件，我发创建的错误

创建命令：

cordova platform add android --save

cordova platform add ios --save

cordova platform add browser --save

不指明创建具体哪个平台的话，系统会自动创建所有平台：目前是三个平台 browser、ios、android

如果只创建某一平台：这里以 iOS 为例
cordova platform add ios --save
创建成功的话，就可以看到platform下面出现了对应平台的文件夹
同时也可以使用cordova platform命令查看已安装平台和可安装平台

这里注意一点：系统默认创建的工程名字是HelloCordova，想要修改需要在config.xml 中，又个name 节点，修改了这个节点的值就可以了


1553160163249.jpg

如果你想查看它在安卓平台下的效果，则需要安装配置 Android SDK 环境，android 打包成功之后的安装包可以在 "platforms → android → app → build → outputs → apk → debug" 下面找到。

MAC电脑上可以用Xcode查看效果，并且上传App Store

vue 项目文件 build cordova 的 www目录下

因为Cordova build工程的时候，系统默认只会打包www下的网页文件，所有vue工程需要将文件build 到 www 文件夹下。
因为vue项目默认不是build到www下，所以需要修改 vue 项目的 config 文件下的 index.js 文件：config/index.js
修改文件中的 build 对象中的内容

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: 'learn-cordova',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

这里看到了这有index: path.resolve和assetsRoot: path.resolve两个内容，根据实际情况，改为相对index.js的实际 www 的目录地址 就可以了，因为的vue在cordova项目根目录下所以为

// Template for index.html
    index: path.resolve(__dirname, '../../www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../www'),

如果 vue工程 不是在 cordova 根目录下，还需要修改一个地方：build文件下的 utils.js 文件
：build/utils.js
在exports.cssLoaders = function (options)方法下找到这样一段代码：

// Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

在这段代码中添加一行代码如下：

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
       //这里以cordova工程和vue工程在同一目录下，为兄弟文件夹为例
        publicPath:"../",  //相对vue工程Cordova工程所在的目录路径
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

个人建议vue 工程放在cordova工程根目录，这样就不用配置后面这一步，并且复制工程的时候直接复制Cordova工程就全部复制了，

下一步：将vue 代码build 到www 下，在vue工程根目录下，执行
npm run build 命令
如果成功，会发现www下的文件已经替换为了我们vue项目 打包编译出来的最新代码了。

sh: rimraf: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! forestTown@1.0.0 build: `rimraf ./dist && node --trace-warnings build/build.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the forestTown@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/cmac/.npm/_logs/2019-07-03T09_01_17_669Z-debug.log

那么在vue工程根目目录执行npm install，错误原因是缺少库文件，一般新工程和拉去的别人的工程都要这样操作一次

最后一步：使用Cordova 打包各个平台的项目：
我们回到 cordova 项目根目录，在其下执行 cordova build <platform name> 就可以打包出 vue 项目了
这里以iOS 为例：
cordova build ios
如果成功就可以看到platform 文件下对应平台的开发包，是我们最新的代码了。打包完成

注意出现的一些错误问题

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

这里主要xcodebuild这个关键字，遇到类似显示这个的错误，不知道原因的话也开始试试这个方法：
我出现问题原因是升级过Xcode，
但是明明是升级，为啥会报路径错误呢，于是开始搜索询问，终于找到原因，升级xcode后，不是系统默认位置，需要修改，终端执行下面命令：
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
这样就不会再报这个错误了

问题二：Cordova - CordovaError: Promise rejected with non-error: 'ios-deploy was not found

问题一解决了再用Corvoda打包可能还会出现这个错误，那是没有安装ios-deploy，
安装方法：
sudo npm install -g ios-deploy
如果上面方法失败，使用下面的指令：
sudo npm install -g ios-deploy --unsafe-perm=true

再corvoda打包基本就成功了

问题三： vue打包提示 “sh: rimraf: command not found” 错误

上一篇下一篇

猜你喜欢

热点阅读